title: Can I insert a computed property into a Vue component dynamically
body: <p>I am generating the contents of a Vue component by iterating through a large array of objects. I'd like to use computed properties to determine whether to show certain nodes, but since the computed reference is used inside a loop, I need to be able to set the reference name dynamically.</p>
  
  <p>Below is a notional example of what I'm trying to do. How can I make <code>showItemX</code> change based on the current item?</p>
  
  <pre><code>&lt;template&gt;
    &lt;ul&gt;
      &lt;li v-for="item in myArr" v-if="showItemX"&gt;
        {{ item.name }}
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/template&gt;
  &lt;script&gt;
    export default {
      data() {
        return {
          myArr: [{
            id: 'item1',
            name: 'Item 1'
          }, {
            id: 'item2',
            name: 'Item 2'
          }]
        };
      },
      computed: {
        showItem1: function() {
          return this.$store.state.showItem1;
        },
        showItem2: function() {
          return this.$store.state.showItem2;
        }
      }
    }
  &lt;/script&gt;
  </code></pre>
  
  <h1>2 possible solutions</h1>
  
  <p>These are the two routes I've considered so far, but I'm not sure which one would be more efficient or if another way would be preferred:</p>
  
  <h2>1. Return a single object for the computed property</h2>
  
  <p>In this option, the two computed properties above would be combined into a single property:</p>
  
  <pre><code>computed: {
    showItem: function() {
      return {
        item1: this.$store.state.showItem1,
        item2: this.$store.state.showItem2
      }
    }
  }
  </code></pre>
  
  <p>Then the the <code>v-if</code> would be set to <code>showItem[item.id]</code>:</p>
  
  <pre><code>&lt;li v-for="item in myArr" v-if="showItem[item.id]"&gt;
    {{ item.name }}
  &lt;/li&gt;
  </code></pre>
  
  <p>The downside here is that it seems that the entire object gets recomputed each time one of the dependencies changes.</p>
  
  <h2>2. Use a method to get the corresponding computed property</h2>
  
  <p>Here I tried passing <code>item.id</code> to a method as a way to access the corresponding computed property:</p>
  
  <pre><code>computed: {
    item1Show: function() {
      return this.$store.state.showItem1;
    },
    item2Show: function() {
      return this.$store.state.showItem2;
    }
  },
  methods: {
    showItem: function(id) {
      return this[id + 'Show']
    }
  }
  </code></pre>
  
  <p>And in the template:</p>
  
  <pre><code>&lt;li v-for="item in myArr" v-if="showItem(item.id)"&gt;
    {{ item.name }}
  &lt;/li&gt;
  </code></pre>
  
  <p>Again, in this example, I'm not sure if I'm fully leveraging the computed properties.</p>
  
  <hr>
  
  <p>Should one of these options be preferred over the other or is there a better way to accomplish this that I'm missing?</p>