在 VUEJS 中打印 JSON 的属性

Question

I would like to read JSON data in my VueJS code.

Here my code :

<template>
 {{info}}
</template>


<script>
import axios from 'axios';

export default {
  data() {
    return {
      info: null
    };
  },
  mounted(){
    axios
      .get('data/products.json')
      .then(response => (this.info = response.data.data)),
  }
</script>

I have that on the website :

[ { "id": "1000", "code": "1", "name": "Certificats", "description": "cert Description", "status": "ERROR"}, { "id": "1005", "code": "2", "name": "Autre", "description": "Product Description", "status": "ERROR"} ]

I would like to be able to call only for example info.id to print just the id or to use it like an attribute in a v-if or in a v-for.

For example be able to do something like that :

 <div :v-for="number in info.id">
   {{number}}
 </div>

Do you know how to do it ?

Thanks

Answer 1

I'd suggest you change your v-for loop, and reference whichever key you want to access

<div :v-for="item in info">
   {{ item.id }}
    {{ item.name }}
</div>

and so on.

Answer 2

 <div v-for="infoItem in info" :key="infoItem.id">
    {{ infoItem.id }}
 </div>

Another solution to show only the ids of the errors would be

    <div v-for="infoItem in info" :key="infoItem.id">
      <div v-if="infoItem.status === 'ERROR'"
        {{ infoItem.id }}
      </div>
    </div>

It's bad practise to combine v-for and v-if in the same line.