Блог

Я хочу отобразить содержимое requestData li элементов to каждый элемент списка получает функцию onclick, которая, если щелкнуть(выбрать) элемент li, добавляет определенное значение из ссылки в массив позже, если щелкнуть снова(не выбран), удаляет элемент /

как я могу объединить вывод функции true / false
:class="{ selected: requestData }" чтобы добавить или удалить класс, если он выбран/не выбран

  lt;templategt;  lt;sectiongt;  lt;ulgt;  lt;li  v-for="item in requestData.items"  :key="item.id"  :class="{ selected: requestData }"  @click="getSelectedElemData($event.target)"  gt;  {{ item.name }}  lt;/ligt;  lt;/ulgt;  lt;/sectiongt; lt;/templategt;  lt;scriptgt; 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,  };  }, }; lt;/scriptgt;   

Вы можете попробовать использовать это приложение и вызвать функцию isItemSelected для каждого элемента. Если элемент включен в список, класс, который мы добавили в li, в противном случае он будет удален. И измените функцию isItemSelected в соответствии с вашим текущим набором данных, ниже подходите к ней для массива объектов.

 lt;templategt;  lt;sectiongt;  lt;ulgt;  lt;li  v-for="item in requestData.items"  :key="item.id"  :class="{ 'selected': isItemSelected(item) }"  @click="getSelectedElemData($event.target)"  gt;  {{ item.name }}  lt;/ligt;  lt;/ulgt;  lt;/sectiongt; lt;/templategt;  lt;scriptgt; 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=gt;element.id===item.id)  }   return {  requestData,  isItemSelected,  getSelectedElemData  };  }, }; lt;/scriptgt;