Vue.js - 元素UI - 选择远程搜索去抖 - 可能的问题内存使用情况

时间:2017-06-02 17:00:40

标签: vuejs2

我尝试使用select remote search使用vue.js-2.3element-ui库。 Documentation here

在他们提供的示例中,每次用户输入值时,他们都会触发远程搜索。我想debounce这个。另外,我想制作字段clearable

问题

随着小提琴,该领域不可清除,并且第一个选择的值总是回来。 在我的真实代码中,我觉得使用了太多的内存。如果vue-devtools已打开,如果我选择了某些内容,我的浏览器就会崩溃。

最小再现代码

https://jsfiddle.net/24wv1hz7/

<div id="app">
  <el-form class="formClientPage" ref="form" label-width="120px" label-position="top">
    <el-form-item label="Store" required>
      <el-select v-model="storePicked" filterable clearable :filter-method="setStoreInput" placeholder="Select">
        <el-option v-for="store in computedStoreList" :key="store.id" :label="store.store" :value="store.id">
          <span style="float: left">{{ store.store }}</span>
          <span style="float: right; color: #8492a6; font-size: 13px">{{store.interal_id}}</span>
        </el-option>
      </el-select>
    </el-form-item>
  </el-form>
</div>


var Main = {
    data() {
      return {
        storePicked: false,
        storeSearchValue: '',
        storeList: [],
        ajaxList: [........],
      }
    },
    computed: {
     computedStoreList () {
        if (this.storeList) {
          return this.storeList.filter(store => {
            return store.store.toLowerCase().indexOf(this.storeSearchValue.toLowerCase()) > -1 || store.interal_id.toString().indexOf(this.storeSearchValue) > -1;
          })
        }
      }
    },
    methods: {
      setStoreInput: _.debounce(function (queryStore) { this.storeSearchValue = queryStore; }, 250)
    },
    mounted () {
        const _this = this;
     setTimeout(() => {_this.storeList = _this.ajaxList}, 1000);
    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

问题

jsfiddle出了什么问题?我是否以正确的方式使用功能? (计算属性等)enter image description here

0 个答案:

没有答案