Vue组件只有在热重载后才能正常工作

Question

Vue组件只有在热重载后才能正常工作

3

我花了几个小时在Google上搜索，但是找不到解决方案（还有解释）。

我有一个与Datatable相关的Vue选择组件：

        <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>

使用“statusChanged” on-change 函数：

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

我的目的只是通过选择下拉元素来改变状态。主要问题在于它仅在热重载后才起作用，而不是在页面刷新时起作用！例如：

第一步：我第一次加载页面第二步：下拉菜单不起作用，值“active”不会改变第三步：我在编辑器中更改代码（无论如何），保存它-> 热重载触发并且在选择选项后Datatable将带有应用的筛选器刷新！

为什么这样？有什么想法或建议如何解决它？

- Elmatsidis Paul

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Julio Peña · Answer 1

我在一个新的Vue项目中做了这个，并且运行正常，也许你有一个错误导致你的变量active不起作用（请检查浏览器控制台）

<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>