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中的repsonse包含每个前一个访问者的firstName。

我做错了什么？

Answer 1

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

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

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

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

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

＆＃13;

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)
    }
  }
});

＆＃13;

<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>

＆＃13;

基于输入的VueJS滤波器阵列

1 个答案: