Vue，具有真/假布尔值的 v-select 组件

Question

我有一个来自 vuetify 的 v-select 组件。我需要在这个组件中使用布尔值和 true、false 和 null 选项，我正在寻找解决方案如何以正确的方式做到这一点

我的代码：

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>

Answer 1

要使用布尔值和 null，您的项目应具有以下结构：

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