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

Question

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

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

<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>