Data can not be updated when using v-select multiple

Question

I have the following problem : the selected values of my select box can't be updated. Nothing happens when I try to select or remove options.

This is the code that is causing me troubles :

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

Thanks for the help guys !

score 1 · Accepted Answer · answered Feb 07 '20 at 08:51

The v-model is part of the state and should be returned from 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>

Data can not be updated when using v-select multiple

1 Answers1