title: VueJS How can I use computed property with v-for
body: <p>How can I use computed property in lists. I am using VueJS v2.0.2.</p>
  
  <p>Here's the HTML:</p>
  
  <pre><code>&lt;div id="el"&gt;
      &lt;p v-for="item in items"&gt;
          &lt;span&gt;{{fullName}}&lt;/span&gt;
      &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's the Vue code:</p>
  
  <pre><code>var items = [
      { id:1, firstname:'John', lastname: 'Doe' },
      { id:2, firstname:'Martin', lastname: 'Bust' }
  ];
  
  var vm = new Vue({
      el: '#el',
      data: { items: items },
      computed: {
          fullName: function(item) {
              return item.firstname + ' ' + item.lastname;
          },
      },
  });
  </code></pre>