javascript - 在 Javascript 中为未在 UI 中显示的 vuetify.js v-select 设置值

Question

我有一个 v-select

<v-select v-model="defendantCode"
      =label="Defendant Code"
      :items="defendantCodeOptions"
      :loading="defendantCodeIsLoading"
      :filter="customFilter"
      clearable
      multiple
      dense>
</v-select>

我从这样的 ajax 调用中向它传递了一组项目

this.defendantCodeOptions = response.data;

其中数据是这样的数组{名称:“name3”，值:3}，{名称:“name4”，值:4}

我想在代码隐藏中设置所选项目的值(Javascript)我试过这样设置它们

this.defendantCode = "3,4";

但这不会在 UI 中勾选它们或放置所选项目的名称屏幕上字段中的“name3，name4”。

我需要做什么才能在下拉列表中检查这些值并将其添加到元素字段？

Answer 1

像这样？

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  
  data () {
    return {
      defendantCode: [],
      defendantCodeOptions: []
    }
  },
  
  mounted () {
    this.defendantCodeOptions = [
      {name: 'name1', value: 1},
      {name: 'name2', value: 2},
      {name: 'name3', value: 3},
      {name: 'name4', value: 4}
    ]
    
    this.defendantCode = [3, 4]
  }
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://unpkg.com/@mdi/font@3.9.97/css/materialdesignicons.css" rel="stylesheet">
<link href="https://unpkg.com/vuetify@2.0.17/dist/vuetify.css" rel="stylesheet">
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.0.17/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-select
      v-model="defendantCode"
      label="Defendant Code"
      :items="defendantCodeOptions"
      item-text="name"
      clearable
      multiple
      dense
    ></v-select>
  </v-app>
</div>

我做了两个关键的改变:

1. this.defendantCode = [3, 4]。该值必须是数组，而不是逗号分隔的字符串。
2. item-text="name"，以便 name 字段将用作显示文本。无需设置 item-value，因为它默认为 value，它已经与您的数据相匹配。