Question

谷歌搜索了几个小时，但找不到解决方案（还有说明）。

我有与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”：

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

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

步骤1：我第一次加载页面第2步：下拉列表不起作用，并且“活动”值未更改第3步：无论如何，我都在编辑器中更改代码，将其保存->触发热重装，并且在选择选项生效并且使用已应用过滤器的数据表刷新后！

为什么呢？有任何想法或建议如何解决？

Answer 1

我在一个新的vue项目中这样做并正常工作，也许您遇到一个错误，导致您的变量活动无效（请检查浏览器控制台）

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

Vue组件仅在热加载后才能按预期工作

1 个答案: