Vue.js

Question

我在来自 vue-cli 的 dev-server 上使用 vue-js 和 element-ui 运行 webpack 模板。

我正在尝试去抖动可过滤输入的搜索值。换句话说，我想 debounce :filter-method 并获取参数 query 来执行 ajax 调用

这是 fiddle 示例 https://jsfiddle.net/ffeohmk4/

在那个例子中还没有去抖。

问题

函数getFinalList从未被触发。我假设因为它是 computed property 每次 this.searchValue 更改时都应该触发它。

    var Main = {
    data() {
      return {
        searchValue : '',
        filteredOptions : [],
        options: [{
          value: 'A',
          label: 'A'
        }, {
          value: 'B',
          label: 'B'
        }, {
          value: 'C',
          label: 'C'
        }, {
          value: 'D',
          label: 'D'
        }, {
          value: 'E',
          label: 'E'
        }],
        value8: ''
      }
    },
    computed : {
      getFinalList () {
      alert('getFinalList is called');
       this.filteredOptions = this.options.filter(option => {
          return option.value.toLowerCase().indexOf(this.searchValue.toLowerCase()) > -1;
        })
      }
    },
    methods : {
    setSearchInput (query) {this.searchValue = query}
    },
    created () {
    this.filteredOptions = this.options;
    }
  }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')

Answer 1

这是另一个有效的例子https://jsfiddle.net/ffeohmk4/2/

getFinalList () {
   return this.filteredOptions = this.options.filter(option => {
      return option.value.toLowerCase().indexOf(this.searchValue.toLowerCase()) > -1;
    })
  }



<el-select v-model="searchValue" filterable placeholder="Select" :filter-method="setSearchInput">
<el-option v-for="item in getFinalList" :key="item.value" :label="item.label" :value="item.value">
</el-option>

Vue.js - 计算的属性不会在数据更改时触发

Vue.js - Computed property is not triggered when data is changing

vuejs2

debounce

问题

Vue.js - 计算的 属性 不会在数据更改时触发

Vue.js - Computed property is not triggered when data is changing

vue.js

vuejs2

debounce

问题

Vue.js - 计算的属性不会在数据更改时触发