javascript - VueJS 基于输入过滤数组

Question

我有一个 vuejs应用程序，我正在尝试根据来自表单的输入来过滤数组。

问题是我的数组 autocomplete 没有填充与名字查询匹配的访问者。

我的 HTML

<input class="input" placeholder="First Name" v-model="visitor.first" @keyup.enter="searchVisitors">

我的 Vue 实例

new Vue({

  el: '#app',

  data: {
    previousVisitors: [],
    autocomplete: [],
    visitor: {}
  },

  mounted() {
    axios.get('/visitors/all').then(response => this.previousVisitors = response.data);
  },

  methods: {

    searchVisitors(){
      var q = this.visitor.first;
      this.autocomplete = this.previousVisitors.filter(item => {return item.firstName === q});
      console.log(this.autocomplete);
    }
   }
});

我可以确认来自当前正在填充 previousVisitors 数组的 axios 的响应包含每个先前访问者的 firstName。

我做错了什么？

Answer 1

您的 v-model 设置为 visitor.first 但您正在根据 firstName 进行过滤。

更改您的代码以使用 v-model="visitor.firstName"。

还有一些其他问题可能会在以后引起问题。首先，您动态地向 visitor 添加一个值。那属于 change detection caveat并且该值不会 react 。您应该初始化该值。

data: {
  ...
  visitor:{firstName: ''}
}

此外，您真的应该为过滤器使用计算值。这是一个完整的示例。

console.clear()

const visitors = [{
    firstName: "bob"
  },
  {
    firstName: "mary"
  },
  {
    firstName: "susan"
  },
  {
    firstName: "Phillip"
  },

]


new Vue({

  el: '#app',

  data: {
    previousVisitors: [],
    visitor: {
      firstName: ''
    }
  },

  mounted() {
    // axios.get('/visitors/all').then(response => this.previousVisitors = response.data);
    setTimeout(() => this.previousVisitors = visitors)
  },
  computed: {
    autocomplete() {
      return this.previousVisitors.filter(v => v.firstName === this.visitor.firstName)
    }
  }
});

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app">
  <input class="input" placeholder="First Name" v-model="visitor.firstName"> {{autocomplete}}
</div>