Vue.js Filtered list Method

Question

I am still learning Vue.js. At the moment I am trying to make a simple filtered list method that pulls the data from a json file in Vue. I think that I am having trouble figuring out the correct syntax.

I just cant seem to get it right. Any help is more than welcome :)

This is Vue file:

 <template>
<section>
  <ul>
  <li v-for="product in rings" :key="product">
  {{product.title}}
</li>
</ul>
</section>
</template>

<script>
  import data from '@/assets/data.json';

  export default {
    data() {
      return {
        products: []
      }
    },

   methods: {
     computed: {
       rings(){
         return this.products.filter(product => product.type == 'Ring') 
         }
       }
     }
   } 
</script>

And this is the Json file:

{ "products": [
    { 
      "title": "Ring 1",
      "description": "something",
      "type": "Ring",
      "year": "2018",
      "image": "...",
      "price": "2000,00 kr."
    },
    { 
      "title": "Halskæde 1",
      "description": "something",
      "type": "Halskæde",
      "year": "2018",
      "image": "...",
      "price": "2000,00 kr."
    },
    { 
      "title": "Armbånd 1",
      "description": "something",
      "type": "Armbånd",
      "year": "2018",
      "image": "...",
      "price": "2000,00 kr."
    },
    { 
        "title": "Ørering 1",
        "description": "something",
        "type": "Ørering",
        "year": "2018",
        "image": "...",
        "price": "2000,00 kr."
      }
  ]
}

akuiper · Accepted Answer · 2018-11-28 19:54:12Z

1

You imported the data but never used anywhere inside the component:

import data from '@/assets/data.json';
// notice the data here is just a variable and it has nothing to do with the
// component's data property

export default {
  data () {
    return {
      products: data.products   // init products with imported data
    }
  },

Or with the destructuring syntax:

import { products } from '@/assets/data.json';

export default {
  data () {
    return {
      products   // init products with imported data
    }
  },

edited Nov 28, 2018 at 19:54

answered Nov 28, 2018 at 19:45

akuiper

216k33 gold badges362 silver badges379 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue.js Filtered list Method

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related