title: VueJS computed property vs v-if, performance
body: <p>I have a data array, and each item in the array has a <code>state</code> property that contains one of these values, <code>allowed</code>, <code>pending</code>, <code>rejected</code>. I want to display data in separate sections based on their <code>state</code>. Each data card has two buttons on it that can be used to change item <code>state</code>.</p>
  <p>I'm using three computed properties to separate data like so:</p>
  <pre class="lang-js prettyprint-override"><code>computed: {
      pendingData() {
          return this.data.filter(x =&gt; x.state === 'pending')
      },
      allowedData() {
          return this.data.filter(x =&gt; x.state === 'allowed')
      },
      rejectedData() {
          return this.data.filter(x =&gt; x.state === 'rejected')
      }
  }
  </code></pre>
  <p>and I display them in their own section using <code>v-for</code>.</p>
  <p>Changing <code>state</code> occurs through an API call, so I need to send the id of item and new state to <code>setState</code> function:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;state-change-buttons&quot;&gt;
      &lt;button @click=&quot;setState(item.id, 'allowed')&quot;&gt;
          &lt;span uk-icon=&quot;icon: check; ratio: 1.4&quot;&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;button @click=&quot;setState(item.id, 'pending')&quot;&gt;
          &lt;span uk-icon=&quot;icon: future; ratio: 1.4&quot;&gt;&lt;/span&gt;
      &lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  <p>and this is <code>setState</code> function:</p>
  <pre class="lang-js prettyprint-override"><code>setState(id, state) {
      const index = this.data.findIndex(x =&gt; x.id === id)
      this.$axios.post(`/api/${id}`, {state})
          .then(res =&gt; {
              this.data.splice(index, 1, res.data)
          })
          .catch(err =&gt; {
              this.$notify(err, 'danger')
          })
  }
  </code></pre>
  <p>As you can see, to update my data array in realtime I have to find the index of selected item using <code>findIndex</code>.</p>
  <p><a href="https://v2.vuejs.org/v2/style-guide/#Avoid-v-if-with-v-for-essential" rel="nofollow noreferrer">Vue style guide</a> suggests not to use <code>v-if</code> on the same element as <code>v-for</code>. But should I still avoid it, even if it decreases my app, time complexity?</p>
  <p>current scenario:<br />
  3 computed property (O(3n)) + findIndex (O(n)) + 3 v-for (O(p + r + q))</p>
  <p>conditional <code>v-for</code>:<br />
  3 conditional v-for (O(3n)) (no findIndex, this way I can pass index to <code>setState</code> directly)</p>
  <p>conditional <code>v-for</code> code:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div v-for=&quot;(item, index) in data&quot; v-if=&quot;item.state === 'pending'&quot; :key=&quot;item.id&quot;&gt;
      &lt;!-- data card body (including buttons) --&gt;
  &lt;/div&gt;
  
  &lt;div v-for=&quot;(item, index) in data&quot; v-if=&quot;item.state === 'allowed'&quot; :key=&quot;item.id&quot;&gt;
      &lt;!-- data card body (including buttons) --&gt;
  &lt;/div&gt;
  
  &lt;div v-for=&quot;(item, index) in data&quot; v-if=&quot;item.state === 'rejected'&quot; :key=&quot;item.id&quot;&gt;
      &lt;!-- data card body (including buttons) --&gt;
  &lt;/div&gt;
  </code></pre>