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

Question

我正在使用并vue-js运行element-ui来自dev-server模板。vue-cliwebpack

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

这是小提琴示例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>