CODEWITHSUNDEEP
vue.jsvuetify.js
ajith kumar
ajith kumar

Reputation: 361

How to set filter condition on v-select component vuetify?

I would like to know whether I can set a condition in v-select so that it shows only the necessary options. Below is an example.

<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'
      }
    ]
  })
})

Here i need to show only the option which are having the type as 'test'.

Upvotes: 2

Views: 10857

Answers (1)

Ramon Portela
Ramon Portela

Reputation: 409

For this you can use computed properties to filter your list and be rendered.

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

  }
})

Upvotes: 5

Related Questions