Vue.js中修改数据后计算数据未即时更新问题求助

Hey there! Let's break down why your computed data isn't updating when you modify your state, and walk through how to fix it.

The Root Cause #

In Vue 2, there are two common reactivity gotchas that are likely hitting you here:

• Directly adding new properties to objects: Vue can't detect when you add a new key-value pair to an object after it's initialized (like selected_data_obj[s_index] = someValue). These new properties aren't made reactive automatically.
• Modifying arrays via index: While less likely here, using array[index] = value also doesn't trigger reactivity in Vue 2.

Looking at your code, when you click "Add option" to add a new <Select>, you're probably adding a new property to selected_data_obj directly. That new property isn't reactive, so when you change its value via the select, your computed properties won't pick up the change.

Solution 1: Use this.$set for Reactive Object Properties #

Instead of directly assigning new properties to selected_data_obj, use Vue's built-in this.$set method to ensure the new property is reactive.

Here's how to adjust your add_select_data method:

methods: {
  add_select_data() {
    // First, add new option data (assuming you're doing this already)
    this.option_data.push([{ value: 'new-option', label: 'New Option' }]);
    this.select_data.push({ /* your select config */ });
    
    // Use this.$set to add a reactive property to selected_data_obj
    const newIndex = this.select_data.length - 1;
    this.$set(this.selected_data_obj, newIndex, 'default-value');
  }
}

Solution 2: Switch to an Array for selected_data #

Arrays are often easier to work with for dynamic lists in Vue, since Vue wraps array methods like push(), pop(), etc., to trigger reactivity. Instead of using an object selected_data_obj, use an array selected_data_arr:

Update your template:

<template>
  <div class="index">
    <Row>
      <Select 
        v-for="(select, s_index) in select_data" 
        v-model="selected_data_arr[s_index]" 
        :key="'s-'+s_index" 
        style="width:200px"
      >
        <Option 
          v-for="option in option_data[s_index]" 
          :key="option.value" 
          :value="option.value"
        ></Option>
      </Select>
    </Row>
    <Row>
      <Button type="warning" @click="add_select_data">Add option</Button>
    </Row>
  </div>
</template>

Then adjust your script to use an array:

data() {
  return {
    select_data: [],
    option_data: [],
    selected_data_arr: [] // Use array instead of object
  }
},
methods: {
  add_select_data() {
    this.select_data.push({ /* your select config */ });
    this.option_data.push([{ value: 'new-option', label: 'New Option' }]);
    // Push a default value to the array - this is reactive!
    this.selected_data_arr.push('default-value');
  }
}

Why This Works #

Both approaches ensure that any new values added to your state are reactive. When you modify these reactive values via the <Select> component, your computed properties will detect the change and update immediately.

If your computed property is still not updating after this, double-check that it directly references the reactive state (e.g., selected_data_obj or selected_data_arr)—computed properties only update when their reactive dependencies change.

内容的提问来源于stack exchange，提问作者sof-03