Vue dropdown update items-CodePudding

I want to update dropdown list. Here is my dropdown

<div v-for="(field, key) in config" :key="key">
  <div>
    <v-row>
      <v-col cols="1">
        <div >
        </div>
      </v-col>
      <v-col cols="5">
        <v-autocomplete
          dense
          :items="items[key]"
          item-text="description"
          item-value="id"
          no-filter
          return-object
          single-line
          @change="(event) => updateData(event, key)"
          @click="click()"
        >
        </v-autocomplete>
      </v-col>
    </v-row>
  </div>
</div>

methods: {
    updateData(value, index) {
      getReport(this.id, this.param).then((res) => {
        this.items[index] = res.data.data;
      });
    },
  },

and my code. How can I update the this.items[index]. Is this way correct ? It does not update this.items.

CodePudding user response：

Try to avoid this reactivity issue by using this.$set helper :

this.$set(this.items,index,res.data.data);

CodePudding user response：

That's about the reactivity problem of array of Vue data. See Vue.js - Reactivity in Depth - For Arrays