Vue, v-select component with true/false boolean

user_14657833 0
Viewed 1203

I have a v-select component from vuetify. I need to use boolean in this component with true, false and null options and I'm looking for solution how to do it in correct way

My code:

select.js

<template>
  <v-row align="center">
    <v-col cols="12">
      <v-select
        :items="items"
        readonly
        label="Read-only"
      ></v-select>
    </v-col>
  </v-row>
</template>

script.js

<script>
  export default {
    data: () => ({
      items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
    }),
  }
</script>
vuetify.js vue.js select boolean javascript
1 Answers

To use boolean values and null, your items should have the following structure :

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data: () => ({
    items: [
      {
        text: "true",
        value: true
      },
      {
        text: "false",
        value: false
      },
      {
        text: "null",
        value: null
      }
    ]
  })
});
user_81728570
Related