Question

我正在使用来自vue-js element-ui dev-server的{{1}}和vue-cli使用webpack模板。

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

在这个例子中，还没有去抖动。

问题

永远不会触发函数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 - 数据更改时不会触发计算属性

问题

1 个答案: