如何在 v-select 组件 vuetify 上设置过滤条件？

Question

我想知道我是否可以在 v-select 中设置一个条件，以便它只显示必要的选项。下面是一个例子。

<div id="app">
  <v-app id="inspire">
    <v-container fluid grid-list-xl>
      <v-layout wrap align-center>
        <v-flex xs12 sm6 d-flex>
          <v-select
            :items="items"
            label="Select an option"
            item-text ="name"
            item-value = "name"
          ></v-select>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>


new Vue({
  el: '#app',
  data: () => ({
    items: [
      {
        name : 'abc', type : 'test'
      },
      {
        name : 'xyz', type : 'dev'
      },
      {
        name : 'lmn', type : 'test'
      }
    ]
  })
})

在这里，我只需要显示类型为“测试”的选项。

Answer 1

为此，您可以使用计算属性来过滤您的列表并进行渲染。

<div id="app">
  <v-app id="inspire">
    <v-container fluid grid-list-xl>
      <v-layout wrap align-center>
        <v-flex xs12 sm6 d-flex>
          <v-select
            :items="filteredData"
            label="Select an option"
            item-text ="name"
            item-value = "name"
          ></v-select>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>


new Vue({
  el: '#app',
  data: () => ({
    items: [
      {
        name : 'abc', type : 'test'
      },
      {
        name : 'xyz', type : 'dev'
      },
      {
        name : 'lmn', type : 'test'
      }
    ]
  }),

  computed: {
      filteredData(){
          return this.items.filter(item => item.type === 'test')
      }

  }
})