数组：如何根据索引更改特定值（评级函数）

Question

对于糟糕的标题，我很抱歉，但不知何故，我无法用一句话更好地解释它。

我想要做的是在我的 Vue 应用程序中添加一个评级组件。因此，如果我单击第三颗星，那颗星之前的两颗星也将设置为“真”。

我得到了什么：

const ratingsArray = [
  {
    name: 'rating1',
    ratingCount: 1,
    isClicked: ref(false)
  },
  {
    name: 'rating2',
    ratingCount: 2,
    isClicked: ref(false)
  },
  {
    name: 'rating3',
    ratingCount: 3,
    isClicked: ref(false)
  },
  {
    name: 'rating4',
    ratingCount: 4,
    isClicked: ref(false)
  },
  {
    name: 'rating5',
    ratingCount: 5,
    isClicked: ref(false)
  },
]

我刚刚有一个切换功能来切换isClicked：

function toggleClick(x) {
  x.value = !x.value
}

这是我的模板

<template>
    <div v-for="rating in ratingsArray" 
     :key="rating.name" 
     @click="toggleClick(rating.isClicked)" 
     :class="[rating.isClicked.value ? 'ratingBoxFilled' : 'ratingBox']">
    </div>
</template>

我怎么能说，如果单击了rating3（那么isClicked 为真），那么 rating1 和 rating2 也必须为真？

看来我需要使用数组中的索引。但不知何故，我无法创造一个想法。也许你们可以帮助我。谢谢！

Answer 1

一个简单的循环就可以解决问题：

<template>
    <div v-for="(rating, index) in ratingsArray" 
     :key="rating.name" 
     @click="toggleClick(index)" 
     :class="[rating.isClicked.value ? 'ratingBoxFilled' : 'ratingBox']">
    </div>
</template>

function toggleClick(ratingIndex) {
  for (let i = 0; i < ratingsArray.length; i++) {
    // Set ratingsArray[i].isClicked to true if it's within the requested range
    ratingsArray[i].isClicked.value = (i <= ratingIndex);
  }
}