Vue component works as expected only after Hot Reload

user_7073063 0
Viewed 1303

Googled for hours but couldn't find solution(plus explanation as well).

I have Vue select component related with Datatable:

        <select @change="statusChanged()" v-model="active" name="FilterStatus" id="FilterStatus" class="form-control selectp"  data-placeholder="FilterStatus" tabindex="2">
          <option value="all">All</option>
          <option :value="true">Active</option>
          <option :value="false">Inactive</option>
        </select>

With on-change function "statusChanged":

data() {
  return {
    active: 'all'
  }
},
methods: {
    ...
    statusChanged(){
        if (this.active === true) {
          $("#CustomerTable")
            .DataTable()
            .columns( 1 )
            .search( true )
            .draw();
        } else if (this.active === false) {
         ....
    }
  },

My purpose is just to change the status by selecting at dropdown element. The main PROBLEM is that it is working only AFTER hot reload and not just on refresh of page! For example:

step 1: I load page for first time step 2: Dropdown is not working and value "active" is not changing step 3: I change the code in my editor(no matter what), save it -> hot reload is triggering and after select options work and Datatable is refreshing with filters applied!

Why so? Any ideas or suggestions how to fix it?

vue.js datatable drop-down-menu javascript
1 Answers

I did this in a new vue project and worked correctly, maybe you have an error that causes your variable active not work (Check the browser console)

<template>
  <div id="app">
    <select @change="statusChanged()" v-model="active" name="FilterStatus" id="FilterStatus" class="form-control selectp"  data-placeholder="FilterStatus" tabindex="2">
      <option value="all">All</option>
      <option :value="true">Active</option>
      <option :value="false">Inactive</option>
    </select>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      active: 'all'
    }
  },
  methods: {
    statusChanged(){
        console.log(this.active);
    }
  }
}
</script>
user_65890880
Related