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

Question

I'm sorry for the terrible title, but somehow I can't explain it better in one sentence.

What I want to do is a rating component in my Vue App. So if I click the 3rd star, the two stars before that one are set to "true" as well.

What I got:

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

I just got a toggle function to toggle isClicked :

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

This is my template

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

How can I say, that if rating3 is clicked (so isClicked is true), rating1 and rating2 also got to be true?

It seems that I need to work with the index in my array. But somehow, I cannot create an idea. Maybe you guys can help me out. Thank you!

Answer 1

A simple loop would do the trick:

<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);
  }
}