Question

我需要从两个数据库中获取数据，比较/过滤它们并将它们加载到列表中：

<b-list-group v-if="items">
  <test-item
      v-for="item in items"
      :key="item._id"
      :item="item"
      @updated="fetchData()"
  ></test-item>
</b-list-group>

当我向项目添加数据时，列表不会重新加载。我也有一个搜索字段：

   <b-form-input v-model="search" placeholder="Search for..."></b-form-input>

如果有人在搜索字段中输入数据，如何调用方法并重新加载列表？

@updated 实际上是做什么的？我多次使用谷歌。我不会在这里问，如果我没有尝试很长时间来了解发生的事情。

那么可能是什么问题？

Answer 1

这是来自vuejs文档的示例，他们在其中使用watcher进行v-model。我认为您需要为搜索模型配备观察者，并可以重新加载列表。

（源链接）==> https://vuejs.org/v2/guide/migration.html?#debounce-Param-Attribute-for-v-model-removed

<div id="debounce-search-demo">
  <input v-model="searchQuery" placeholder="Type something">
  <strong>{{ searchIndicator }}</strong>
</div>

new Vue({
  el: '#debounce-search-demo',
  data: {
    searchQuery: '',
    searchQueryIsDirty: false,
    isCalculating: false
  },
  computed: {
    searchIndicator: function () {
      if (this.isCalculating) {
        return '⟳ Fetching new results'
      } else if (this.searchQueryIsDirty) {
        return '... Typing'
      } else {
        return '✓ Done'
      }
    }
  },
  watch: {
    searchQuery: function () {
      this.searchQueryIsDirty = true
      this.expensiveOperation()
    }
  },
  methods: {
    // This is where the debounce actually belongs.
    expensiveOperation: _.debounce(function () {
      this.isCalculating = true
      setTimeout(function () {
        this.isCalculating = false
        this.searchQueryIsDirty = false
      }.bind(this), 1000)
    }, 500)
  }
})

JavaScript（VueJS）重新加载列表

1 个答案: