时间戳

首页 > 解决方案 > Vue 组件只有在 Hot Reload 后才能按预期工作

javascript - Vue 组件只有在 Hot Reload 后才能按预期工作

问题描述

谷歌搜索了几个小时，但找不到解决方案（以及解释）。

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

使用 on-change 函数“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 步：我更改编辑器中的代码（无论如何），保存 -> 热重载正在触发，之后选择选项有效，Datatable 正在刷新并应用过滤器！

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

标签： javascriptvue.jsdrop-down-menudatatable

解决方案

我在一个新的 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>

推荐阅读