javascript - 将 `filterBy` 与动态选择列表一起使用

Question

我正在使用 vue.js 构建一个包含一长串所选项目的表单。我正在使用此处记录的动态选择列表:http://012.vuejs.org/guide/forms.html#Dynamic_Select_Options

但是，我希望允许用户使用 filterBy 快速过滤此列表。指示。我不明白如何将这两者结合起来——是否可以过滤动态列表？或者 filterBy 只能用于 v-for 吗？

Answer 1

在 0.12 中，您可以使用带有选项参数的过滤器。 docs显示与过滤 v-for 相同的语法。

以下示例显示 filterBy (使用版本0.12.16):

var app = new Vue({
  el: '#app',
  
  data: {
    selected: '',
    options: [
      { text: '1', value: 1, show: true },
      { text: '2', value: 2, show: false },
      { text: '3', value: 3, show: true },
      { text: '4', value: 4, show: true },
      { text: '5', value: 5, show: false },
    ]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.js"></script>
<div id="app">
  Filter by 'show' <br>
  <select v-model="selected" options="options | filterBy true in 'show'"></select>
</div>

Note: the options param for <select v-model> has been deprecated in 1.0. In 1.0, you can use v-for directly within <select>. v-for can be nested to use optgroups.