title: How to find array item inside another array item in vue?
body: <p>I'm trying to make a wishlist where I use localstorage. When clicked on &quot;add to wishlist&quot; button the item is added to localstorage and then shows &quot;remove from wishlist&quot; button. I was trying to computed using <em>filter</em> and <em>find</em> ES6 but I might got it wrong. Here is my <a href="https://codesandbox.io/s/wishlist-ouuyw?file=/src/App.vue" rel="nofollow noreferrer">codesandbox-link</a> and also below is the code. Please someone help thanks.</p>
  <p><a href="https://codesandbox.io/s/wishlist-ouuyw?file=/src/App.vue" rel="nofollow noreferrer">https://codesandbox.io/s/wishlist-ouuyw?file=/src/App.vue</a></p>
  <pre class="lang-js prettyprint-override"><code>&lt;template&gt;
    &lt;div id=&quot;app&quot;&gt;
    &lt;h2&gt;Total Selected: {{selectedEntries.length}}&lt;/h2&gt;
      &lt;div v-for=&quot;entry in entries&quot; :key=&quot;entry.id&quot;&gt;
        &lt;div class=&quot;content-wrap&quot;&gt;
        
          &lt;h3&gt;{{entry.title}}&lt;/h3&gt;
          &lt;button v-if=&quot;!checkExists&quot; @click=&quot;addToWishlist(entry.id)&quot;&gt;Add Wishlist&lt;/button&gt;
          &lt;button v-else @click=&quot;removeToWishlist(entry.id)&quot;&gt;Remove Wishlist&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  export default {
    name: &quot;App&quot;,
    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(&quot;wishlistItems&quot;)) || []
      }
    },
    computed:{
      checkExists(){
        return this.entries.filter(entryItem =&gt; {
           this.selectedEntries.find(selectedId =&gt; {
             return entryItem.id === selectedId.id
           })
        })
      }
    },
    methods:{
      addToWishlist(entryId){
        this.selectedEntries.push({ id: entryId });
        window.localStorage.setItem(&quot;wishlistItems&quot;, JSON.stringify(this.selectedEntries));
        console.log(&quot;Clicked&gt;&gt;&gt;&quot;, this.selectedEntries)
      }
    }
  };
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  .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
  }
  &lt;/style&gt;
  
  
  
  </code></pre>