时间戳

首页 > 解决方案 > 在 Javascript 中为 vuetify.js v-select 设置值未显示在 UI 中

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

问题描述

我有一个 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;

其中 data 是这样的数组 {name: "name3", value: 3}, {name: "name4", value: 4}

我想在代码后面（Javascript）中设置所选项目的值，我尝试像这样设置它们

this.defendantCode = "3,4";

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

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

标签： javascriptvue.jsvuetify.js

解决方案

像这样？

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，它已经与您的数据中的内容相匹配。

推荐阅读