數組：如何根據索引更改特定值（評級函數）

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)
  },
]

我剛得到一個切換 function 來切換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);
  }
}