vue array assignment cannot be enumerated

In Vue, it is very common to use arrays for data binding. However, sometimes we may encounter a strange problem: when we directly change the value of the array using an assignment statement, the component does not re-render.

This is because Vue’s responsive system is implemented based on JavaScript setters. When you try to directly modify the data in the Vue instance, Vue does not capture this operation, and it cannot update the view to reflect these changes. In other words, Vue cannot guarantee support for non-responsive data.

Let’s look at an example:

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
    <button @click="updateItems">Update Items</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ["Apple", "Banana", "Cherry"]
    };
  },
  methods: {
    updateItems() {
      this.items = ["Grape", "Orange", "Pineapple"];
    }
  }
};
</script>

In this component, we have a simple array items, which is used to display an unordered list. There is also a button, and when we click it, we directly assign the items array to a new array.

When we run this component, we will find that clicking the button does not update the list. This is because we used the assignment statement to directly change the items array. In this case, Vue cannot detect changes to the array.

So what should we do?

Vue provides some methods to solve this problem. Let's take a look at some of them.

1. Vue.set

Vue.set is a global method of Vue, used to add responsive properties to responsive objects. When dealing with arrays, Vue.set can also be used to insert a new element at a specified position.

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
    <button @click="updateItems">Update Items</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ["Apple", "Banana", "Cherry"]
    };
  },
  methods: {
    updateItems() {
      Vue.set(this.items, 1, "Orange");
    }
  }
};
</script>

In this example, we replace the array assignment statement in the updateItems method with the Vue.set method. The first parameter is the array to be modified, the second parameter is the index to be modified, and the third parameter is the new element to be inserted.

Now we can safely modify the array and the view will be updated accordingly.

2. splice

JavaScript’s splice method can add or remove elements at the specified position. In Vue we can use this to update arrays and trigger view re-rendering.

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
    <button @click="updateItems">Update Items</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ["Apple", "Banana", "Cherry"]
    };
  },
  methods: {
    updateItems() {
      this.items.splice(1, 1, "Orange");
    }
  }
};
</script>

In this example, we used the splice method to replace Banana with Orange and updated the items# in place ##Array. This will trigger a re-render.

Of course, this does not mean that we should use the

splice method at all times, but we must choose according to our specific circumstances.

3. filter

When we need to remove certain elements in the array, we can use the

filter method. It returns a new array containing only elements that satisfy the condition.

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
    <button @click="updateItems">Update Items</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ["Apple", "Banana", "Cherry"]
    };
  },
  methods: {
    updateItems() {
      this.items = this.items.filter(item => item !== "Banana");
    }
  }
};
</script>

In this example, we use the

filter method to create a new array, retaining only elements that are not equal to Banana. Then we assign the original array to this new array, thus triggering an update of the view.

Summary

In Vue, the direct assignment of an array does not trigger the re-rendering of the view. This is due to the implementation mechanism of Vue's responsive system. In order to solve this problem, Vue provides many methods to deal with different situations, such as

Vue.set, splice and filter, etc. Choosing the appropriate method can make it easier for us to complete the functions we need to operate, and also make our code more readable and maintainable.

The above is the detailed content of vue array assignment cannot be enumerated. For more information, please follow other related articles on the PHP Chinese website!