title: How to solve this specific bug in a memory like game built with vue.js?
body: <p>I want to build a website where you can mix elements to create new elements, a bit like little alchemy.
  For example <code>fire</code> + <code>stone</code> = <code>lava</code>.
  It is built with cue</p>
  <p>Right now, everything is working fine, except there is one bug:
  When you do <code>air</code> + <code>air</code> it equals <code>wind</code> (this is good). And when you do <code>water</code> + <code>air</code> it equals <code>rain</code> (this is good as well). But when you do <code>air</code> + <code>water</code>, it says that it is not a good mix.</p>
  <p>It is a very specific subject and it is pretty hard to explain.</p>
  <p>This is my code:</p>
  <pre><code>&lt;template&gt;
    &lt;button
      v-for=&quot;element in myElements&quot;
      :key=&quot;element&quot;
      @click=&quot;firstInput = element&quot;
    &gt;
      {{ element }}
    &lt;/button&gt;
    &lt;br /&gt;
    &lt;button
      v-for=&quot;element in myElements&quot;
      :key=&quot;element&quot;
      @click=&quot;secondInput = element&quot;
    &gt;
      {{ element }}
    &lt;/button&gt;
    &lt;h2&gt;{{ firstInput }} + {{ secondInput }} = {{ nameResult }}&lt;/h2&gt;
    &lt;datalist id=&quot;elements&quot;&gt;
      &lt;option
        v-for=&quot;element in myElements&quot;
        :key=&quot;element&quot;
        :value=&quot;element&quot;
      &gt;&lt;/option&gt;
    &lt;/datalist&gt;
    &lt;br /&gt;
    &lt;button @click=&quot;checkInList&quot;&gt;Check&lt;/button&gt;
    &lt;!-- &lt;h1&gt;{{ nameResult }}&lt;/h1&gt; --&gt;
    &lt;h1&gt;Attention: don't refresh&lt;/h1&gt;
    &lt;div v-for=&quot;element in list&quot; :key=&quot;element&quot;&gt;
      &lt;h2&gt;{{ element.name }}&lt;/h2&gt;
      &lt;div v-for=&quot;creation in element.elements&quot; :key=&quot;creation&quot;&gt;
        &lt;div v-if=&quot;myElements.includes(element.name)&quot;&gt;{{ creation }}&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- &lt;test-component /&gt; --&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { ref } from &quot;@vue/reactivity&quot;;
  // import TestComponent from &quot;./components/TestComponent.vue&quot;
  
  export default {
    name: &quot;App&quot;,
    // components: {
    //   TestComponent,
    // },
    setup() {
      const firstInput = ref(&quot;&quot;);
      const secondInput = ref(&quot;&quot;);
      const elementsResult = ref(&quot;&quot;);
      const nameResult = ref(&quot;&quot;);
      const result = ref(&quot;&quot;);
      const myElements = ref([&quot;water&quot;, &quot;air&quot;, &quot;stone&quot;, &quot;fire&quot;]);
  
      const list = ref([
        { name: &quot;mountain&quot;, elements: [&quot;stone&quot;, &quot;stone&quot;] },
        { name: &quot;lava&quot;, elements: [&quot;stone&quot;, &quot;fire&quot;] },
        { name: &quot;wind&quot;, elements: [&quot;air&quot;, &quot;air&quot;] },
        { name: &quot;rain&quot;, elements: [&quot;air&quot;, &quot;water&quot;] },
        { name: &quot;volcano&quot;, elements: [&quot;lava&quot;, &quot;mountain&quot;] },
      ]);
  
      const listNames = ref([]);
      list.value.forEach((element) =&gt; listNames.value.push(element.name));
  
      const checkInList = () =&gt; {
        const values = [firstInput.value, secondInput.value];
        values.every((value) =&gt; {
          result.value = list.value.filter((x) =&gt; x.elements.includes(value))[0];
        });
  
        elementsResult.value = JSON.parse(JSON.stringify(result.value)).elements;
        console.log(elementsResult.value);
        const arrayEquals = (a, b) =&gt; {
          return (
            Array.isArray(a) &amp;&amp;
            Array.isArray(b) &amp;&amp;
            a.length === b.length &amp;&amp;
            a.every((val, index) =&gt; val === b[index])
          );
        };
  
        // console.log(
        //   Array.from(nameResult.value) == [firstInput.value, secondInput.value]
        // );
        console.log(
          arrayEquals(elementsResult.value, [
            firstInput.value,
            secondInput.value,
          ]) ||
            arrayEquals(elementsResult.value, [
              secondInput.value,
              firstInput.value,
            ])
        );
        if (
          arrayEquals(elementsResult.value, [
            firstInput.value,
            secondInput.value,
          ]) ||
          arrayEquals(elementsResult.value, [secondInput.value, firstInput.value])
        ) {
          // console.log(elementsResult.value)
          nameResult.value = JSON.parse(JSON.stringify(result.value)).name;
  
          // console.log(firstInput.value, secondInput.value)
          if (!myElements.value.includes(nameResult.value)) {
            myElements.value.push(nameResult.value);
          }
        }
      };
  
      return {
        firstInput,
        secondInput,
        checkInList,
        myElements,
        nameResult,
        list,
      };
    },
  };
  &lt;/script&gt;
  </code></pre>
  <p>Please help me out if you know an answer.</p>