数组更改不会重新渲染模板

Question

我有一个组件，其中模板仅在我更改唯一值时才会更新：

setup(prop) {
  const uniqueValue = ref(1);
  const fullStar = ref(['fillerValue', false, false, false, false, false]);

  const displayRating = (rating: number) => {
    uniqueValue.value += 1;
    for (let index = 1; index <= rating; index++) {
      fullStar.value[index] = true;
    }
  };

  return {
    uniqueValue,
    fullStar,
  }

<template>
  <div class='ratingContainer'
    v-on:mouseleave='displayRating(storedRating)'>
    <div v-for='n in 5' :key='n'>
      <StarIcon v-if='fullStar[n]' />
      <div style="display: none">{{ uniqueValue }}</div>
    </div>
  </div>
</template>

我有一个名为fullStar 的数组，我想根据传递给displayRating 函数的评分在模板中显示一些星星。

但只有当我在模板中使用uniqueValue 值时，模板才会重新呈现，即使fullStar 数组值也发生了变化。

Answer 1

Looks like Vue is having some trouble with reactivity and array values。正如有人在该问题中所说：

只需在响应式中创建一个包含数组的对象。这很好用。类似于之前vue 2中的数据对象：

setup() {  
const fullStar = reactive({
  list: [
    { value: false },
    { value: false },
    { value: false },
    { value: false },
    { value: false },
    { value: false },
  ],
});

displayRating = (rating: number) => {
  for (let index = 1; index <= rating; index++) {
     // when this function is called it will set a number of objects in the list array to true and it will update the template.
     fullStar.list[index].value = true
  }
}

return { fullStar };
}

<template>
  <div class='ratingContainer'
    v-on:mouseleave='displayRating(storedRating)'>
    <div v-for='n in 5' :key='n'>
      <StarIcon
        v-if='fullStar.list[n].value' />
    </div>
  </div>
</template>