Quiero representar el contenido de requestData en elementos li , cada elemento de la lista obtiene una función onclick que, si se hace clic en el elemento li (seleccionado), agrega un valor específico de una referencia a una matriz más tarde si se vuelve a hacer clic (no seleccionado) elimina el elemento /
¿Cómo puedo combinar la salida de la función true / false ?
a :class="{ selected: requestData }" para agregar o eliminar la clase si está seleccionada/no seleccionada
<template> <section> <ul> <li v-for="item in requestData.items" :key="item.id" :class="{ selected: requestData }" @click="getSelectedElemData($event.target)" > {{ item.name }} </li> </ul> </section> </template> <script> import { onMounted, ref } from "@vue/runtime-core"; import items from "../assets/comp.Data/items.json"; export default { setup() { let requestData = ref(items); let selectedElements = []; function getSelectedElemData(target) { for (let element of requestData._rawValue.items) { if (target.innerText === element.name) { console.log(element); // Add to calc // update the selectedElements array selectedElements.push(element); console.log(selectedElements); return true; } } } return { requestData, getSelectedElemData, }; }, }; </script>Puede intentar usar este enfoque y llamar a la función isItemSelected para cada elemento. Si el elemento está incluido en la lista, la clase que agregamos al li, de lo contrario, se eliminará. Y cambie la función isItemSelected de acuerdo con su conjunto de datos actual, el enfoque a continuación es para una matriz de objetos.
<template> <section> <ul> <li v-for="item in requestData.items" :key="item.id" :class="{ 'selected': isItemSelected(item) }" @click="getSelectedElemData($event.target)" > {{ item.name }} </li> </ul> </section> </template> <script> import { onMounted, ref } from "@vue/runtime-core"; import items from "../assets/comp.Data/items.json"; export default { setup() { let requestData = ref(items); let selectedElements = []; function getSelectedElemData(target) { for (let element of requestData._rawValue.items) { if (target.innerText === element.name) { console.log(element); // Add to calc // update the selectedElements array selectedElements.push(element); console.log(selectedElements); return true; } } } function isItemSelected(item){ return selectedElements.find(element=>element.id===item.id) } return { requestData, isItemSelected, getSelectedElemData }; }, }; </script>