Estoy buscando la manera correcta de escribir esto, tengo una matriz de estudiantes y cada estudiante tiene un atributo seleccionado que se establece en verdadero o falso, cuando se hace clic en el botón, se selecciona el estudiante y este es el método: (Quiero que otros estudiantes atributos que se establecerán en falso)
selectStudent(id) { this.students[id].isSelected = true this.selectedStudent = this.students[id] let studentsFalse = this.students.filter(studentId => studentId != this.students[id]) for (let i= 0; i < studentsFalse.length; i++) { studentsFalse[i].isSelected = false } },Simplemente puede recorrer la matriz y establecer los valores en verdadero o falso dependiendo de si el elemento está en el índice correcto.
selectStudent(id) { this.selectedStudent = this.students[id] for (let i= 0; i < this.students.length; i++) { this.students[i].isSelected = i === id; } },Con generic for you puede hacer esto, se modificará la propiedad de todos los estudiantes, solo verifique si la key del estudiante coincide con el parámetro id.
selectStudent(id) { this.selectedStudent = this.students[id]; for (let key=0; key<this.students.length; key++) { this.students[key].isSelected = key === id; } }Para probar aquí:
const object = { students: [ { name: "Fernanda", isSelected: false }, { name: "Paula", isSelected: false }, { name: "Gabriel", isSelected: false } ], selectedStudent: null, selectStudent(id) { this.selectedStudent = this.students[id]; for (let key=0; key<this.students.length; key++) { this.students[key].isSelected = key === id; } } } object.selectStudent(1); console.log(`Selected student: ${object.selectedStudent.name}`); object.selectStudent(2); console.log(`New selected student: ${object.selectedStudent.name}`); console.log(object.students);Demostración de trabajo:
const app = new Vue({ el: '#app', data: { students: [{ id: 1, name: 'Student 1', isSelected: false }, { id: 2, name: 'Student 2', isSelected: false }], studentSelected: false }, methods: { selectStudent(event) { if (event.target.checked) { this.students.forEach((student) => { student.isSelected = parseInt(event.target.value) === parseInt(student.id) }) } console.log('updated students list : ', this.students) } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <ul> <li v-for="student in students" :key="student.id"> <input type="checkbox" :value="student.id" v-model="student.isSelected" id="student.id" @click="selectStudent"> {{student.name}} </li> </ul> </div>