使用v-select multiple时无法更新数据

Question

我遇到以下问题：我的 select 框的 selected 值无法更新。当我尝试 select 或删除选项时没有任何反应。

这是给我带来麻烦的代码：

<template>
        <h4>Select nutritional properties: </h4>
        <v-select multiple v-model="ingredientNutritionalProperties" :options="nutritionalPropertiesDropdown" value="id" label="name" />
</template>

<script>

    export default {
        data(){
            return{
                ingredientData:{
                    propertiesId:[]
                }
            }
        },
        computed:{
            ingredientNutritionalProperties: {
                get: function () {
                    var ingredientProperties = this.ingredient.properties;
                    this.ingredientData.propertiesId = Object.keys(ingredientProperties).map(i => ingredientProperties[i]);
                    return Object.keys(ingredientProperties).map(i => ingredientProperties[i]);
                },
                set: function (newValue) {
                    console.log(newValue);
                    this.ingredientData.propertiesId = newValue;
                }
            },
            nutritionalPropertiesDropdown:function(){
                var nutritionalProperties = this.nutritionalProperties;
                return Object.keys(nutritionalProperties).map(i => nutritionalProperties[i])
            }
        },
    }
</script>

感谢大家的帮助！

Answer 1

v-model 是状态的一部分，应该从 data 返回。

<template>
  <h4>Select nutritional properties: </h4>
  <v-select multiple v-model="selectedValues" :options="nutritionalPropertiesDropdown" value="id" label="name" />
</template>

<script>
  export default {
    data(){
      return{
          selectedValues: [],
          ingredientData:{
              propertiesId:[]
          }
      }
  }
</script>

使用v-select multiple时无法更新数据

Data can not be updated when using v-select multiple

vue.js

vuetify.js

vue-select