数组更改不会重新呈现模板

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。正如某人在该期中所说：

Just make in reactive an object whith an array in it. This works very well. Similiar to the data object in vue 2 before:

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>

数组更改不会重新呈现模板

Array change does not rerender template

vuejs2

vue-composition-api