Vue - computed and v-for #vue #v-for

vue-computed-and-v-for.js

<ul>
  <li v-for="item in itemsLessThanTen" :key="item.name">
    {{ item.name }} - {{ item.price }}
  </li>
</ul>

<script>
export default {

  data () {
    return {
      shoppingItems: [
        { name: 'apple', price: '7' },
        { name: 'orange', price: '12' }
      ]
    }
  },

  computed: {
    itemsLessThanTen () {
      return this.shoppingItems.filter((item) => {
        return item.price > 10
      })
    }
  }
}
</script>