Estoy tratando de hacer una lista de deseos donde uso el almacenamiento local. Cuando se hace clic en el botón "agregar a la lista de deseos", el elemento se agrega al almacenamiento local y luego muestra el botón "eliminar de la lista de deseos". Estaba tratando de calcular usando el filtro y encontrar ES6, pero podría equivocarme. Aquí está mi enlace de codesandbox y también debajo está el código. Por favor alguien ayuda gracias.
https://codesandbox.io/s/wishlist-ouuyw?file=/src/App.vue
<template> <div id="app"> <h2>Total Selected: {{selectedEntries.length}}</h2> <div v-for="entry in entries" :key="entry.id"> <div class="content-wrap"> <h3>{{entry.title}}</h3> <button v-if="!checkExists" @click="addToWishlist(entry.id)">Add Wishlist</button> <button v-else @click="removeToWishlist(entry.id)">Remove Wishlist</button> </div> </div> </div> </template> <script> export default { name: "App", data(){ return{ entries: [ { title: 'entry one', id: 1 }, { title: 'entry two', id: 2 }, { title: 'entry three', id: 3 }, { title: 'entry four', id: 4 }, { title: 'entry five', id: 5 }, ], selectedEntries: JSON.parse(window.localStorage.getItem("wishlistItems")) || [] } }, computed:{ checkExists(){ return this.entries.filter(entryItem => { this.selectedEntries.find(selectedId => { return entryItem.id === selectedId.id }) }) } }, methods:{ addToWishlist(entryId){ this.selectedEntries.push({ id: entryId }); window.localStorage.setItem("wishlistItems", JSON.stringify(this.selectedEntries)); console.log("Clicked>>>", this.selectedEntries) } } }; </script> <style scoped> .content-wrap{ display: flex; border: 1px solid; margin: 5px; padding: 5px; align-items: center; } .content-wrap h3{ text-transform: capitalize; width: 30%; } .content-wrap button{ border: none; padding: 10px 20px; height: 30px; background-color: #1d9a61; color: #fff; font-size: 16px; cursor: pointer; line-height: .7 } </style>Puede crear un método que verifique si el objeto está presente en la matriz de objetos seleccionados y muestre los botones respectivos en consecuencia. No estoy seguro de por qué solo desea mantenerlo como una propiedad computed . Porque las propiedades calculadas no se usan realmente para calcular valores de elementos de matriz sobre la marcha. Los métodos de propiedad Computed no aceptan un argumento, por lo que no es directamente posible. Las propiedades calculadas se usan más para valores únicos definidos en la propiedad de data . Mire su documentación oficial .
Entonces, si solo desea utilizar una propiedad computed , tendrá que crear una propiedad computed para obtener los elementos matching y luego crear otro método que básicamente tome esta matriz de elementos coincidentes y el entry.id actual y devuelva un valor booleano. Pero esta no es una buena solución. La solución ideal sería simplemente tenerlo como un método que toma el entry.id actual como argumento, como se muestra a continuación.
.
<template> <div id="app"> <h2>Total Selected: {{selectedEntries.length}}</h2> <div v-for="entry in entries" :key="entry.id"> <div class="content-wrap"> <h3>{{entry.title}}</h3> <button v-if="!checkExists(entry.id)" @click="addToWishlist(entry.id)">Add Wishlist</button> <button v-else @click="removeToWishlist(entry.id)">Remove Wishlist</button> </div> </div> </div> </template> <script> export default { name: "App", data(){ return{ entries: [ { title: 'entry one', id: 1 }, { title: 'entry two', id: 2 }, { title: 'entry three', id: 3 }, { title: 'entry four', id: 4 }, { title: 'entry five', id: 5 }, ], // selectedEntries: JSON.parse(window.localStorage.getItem("wishlistItems")) || [], selectedEntries: [{ title: 'entry one', id: 1 }, { title: 'entry two', id: 2 }], } }, methods:{ addToWishlist(entryId){ this.selectedEntries.push({ id: entryId }); window.localStorage.setItem("wishlistItems", JSON.stringify(this.selectedEntries)); console.log("Clicked>>>", this.selectedEntries) }, checkExists(entryId){ return this.selectedEntries.find(item => item.id === entryId); } } }; </script> <style scoped> .content-wrap{ display: flex; border: 1px solid; margin: 5px; padding: 5px; align-items: center; } .content-wrap h3{ text-transform: capitalize; width: 30%; } .content-wrap button{ border: none; padding: 10px 20px; height: 30px; background-color: #1d9a61; color: #fff; font-size: 16px; cursor: pointer; line-height: .7 } </style>