Question

我有一个像这样的JSON文件，这是'pproduct'数组

[
        {
        "id": 2,
        "title": "Domena .pl, com.pl lub .eu 0 z\u0142 przez pierwszy rok.",
        "slug": "domena-pl-0zl-1rok",
        "pubickdate": "2018-08-20",
        "price": 150,
        "mainphoto": null,
        "pcontent": null,
        "created_at": "2018-08-20 10:14:42",
        "updated_at": "2018-08-20 10:14:42",
        "deleted_at": null,
        "pcategories": [
            {
                "id": 1,
                "pcategoryname": "Pakiet internetowy",
                "pcslug": "pakiet-internetowy",
                "created_at": "2018-08-20 10:04:41",
                "updated_at": "2018-08-20 10:04:41",
                "deleted_at": null,
                "pivot": {
                    "pproduct_id": 2,
                    "pcategory_id": 1
                }
            }
        ]
    },
    {
        "id": 1,
        "title": "Indywidualny projekt serwisu spe\u0142niaj\u0105cy wymagania User Center Design dostosowany do bran\u017cy firmy",
        "slug": "indywidualny-projekt-serwisu",
        "pubickdate": "2018-08-20",
        "price": 600,
        "mainphoto": null,
        "pcontent": null,
        "created_at": "2018-08-20 10:11:04",
        "updated_at": "2018-08-23 07:02:05",
        "deleted_at": null,
        "pcategories": [
            {
                "id": 1,
                "pcategoryname": "Pakiet internetowy",
                "pcslug": "pakiet-internetowy",
                "created_at": "2018-08-20 10:04:41",
                "updated_at": "2018-08-20 10:04:41",
                "deleted_at": null,
                "pivot": {
                    "pproduct_id": 1,
                    "pcategory_id": 1
                }
            }
        ]
    }
]

如何在vue.js中获取嵌套数据，例如：pcategoryname，pcslug。关于如何在v-for循环中显示此数据的任何建议。我想显示：标题，价格，pcategoryname，pcslug。

当我使用{{pproduct.pcategoryname}}时，出现“未定义”错误。

这是我的vue.js模板

<template>
    <div class="listproduct">
        <div class="container col s12 m8 offset-m2 l6 offset-l3">
            <h2>Pakiet Internetowy</h2>  
            <div class="list">                
                <ul>
                   <li v-for="pproduct in pproducts" :key="pproduct.id">
                       <!-- <span>{{ index + 1 }}.</span> -->
                       <span>{{ pproduct.title }}</span>     
                       <span><strong>Kategoria: {{ pproduct.pcategoryname }}</strong></span>
                       <span class="price">{{ pproduct.price }} zł</span>
                   </li>
                </ul>
            </div>       
        </div>
    </div>
</template>

<script>
export default {
    data: function(){
        return {
           pproducts: [],
           pcategories: []
        };
    },

    methods: {
        filteredPproducts: function(){
            if(this.pproducts.length){
                 return this.pproducts;
            };
            // if(this.pcategories.length){
            //      return this.pcategories;
            // };

        }
    },

    created(){
        axios.get('http://127.0.0.1:8000/api/pproducts')
        .then(response => {
            console.log(response.data)
            console.log(response.data.pcategoryname)
            this.pproducts = response.data,
            this.pcategories = response.data                    

        })
    }
}
</script>

<style>
span.price{
    font-weight: bold;
    color: #ef6c00;
}

</style>

Answer 1

您的产品对象中有一系列类别，并且您尝试使用pproduct.pcategoryname访问它们，pcategoryname是类别的属性，而不是产品。

还可以迭代产品的类别。

new Vue({
  el: "#app",

  data() {
    return {
      pproducts: [{
          id: 2,
          title: 'Domena .pl, com.pl lub .eu 0 z\u0142 przez pierwszy rok.',
          slug: 'domena-pl-0zl-1rok',
          pubickdate: '2018-08-20',
          price: 150,
          mainphoto: null,
          pcontent: null,
          created_at: '2018-08-20 10:14:42',
          updated_at: '2018-08-20 10:14:42',
          deleted_at: null,
          pcategories: [{
            id: 1,
            pcategoryname: 'Pakiet internetowy',
            pcslug: 'pakiet-internetowy',
            created_at: '2018-08-20 10:04:41',
            updated_at: '2018-08-20 10:04:41',
            deleted_at: null,
            pivot: {
              pproduct_id: 2,
              pcategory_id: 1,
            },
          }, ],
        },
        {
          id: 1,
          title: 'Indywidualny projekt serwisu spe\u0142niaj\u0105cy wymagania User Center Design dostosowany do bran\u017cy firmy',
          slug: 'indywidualny-projekt-serwisu',
          pubickdate: '2018-08-20',
          price: 600,
          mainphoto: null,
          pcontent: null,
          created_at: '2018-08-20 10:11:04',
          updated_at: '2018-08-23 07:02:05',
          deleted_at: null,
          pcategories: [{
            id: 1,
            pcategoryname: 'Pakiet internetowy',
            pcslug: 'pakiet-internetowy',
            created_at: '2018-08-20 10:04:41',
            updated_at: '2018-08-20 10:04:41',
            deleted_at: null,
            pivot: {
              pproduct_id: 1,
              pcategory_id: 1,
            },
          }, ],
        },
      ],
    }
  },
})

Vue.config.productionTip = Vue.config.devtools = false

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
  <h2>Products:</h2>
  <ol>
    <li v-for="product in pproducts" :key="product.id">
      <p>
        Product: {{ product.title }}
      </p>
      <p>
        Categories:
      </p>
      <ul>
        <li v-for="category in product.pcategories" :key="category.id">
          <p>
            {{ category.pcategoryname }}
          </p>
        </li>
      </ul>
    </li>
  </ol>
</div>

Answer 2

请注意，您的categoryname是您需要遍历的数组。如果您知道只有一个类别，则可以使用{{product.pcategories[0].pcategoryname}}，但是如果您没有类别，这将引起问题，即使类别更多也只会显示一个类别

这是处理此问题的两种选择

选项1 -使用v-for遍历类别并为每个类别添加dom元素

<li v-for="pproduct in pproducts" :key="pproduct.id">
    <span>{{ pproduct.title }}</span>     
    <span><strong>Kategoria: </strong><strong v-for="pcategory in product.pcategories" :key="pcategory.id">{{ pcategory.pcategoryname }}</strong></span>
    <span class="price">{{ pproduct.price }} zł</span>
</li>

选项2 -使用map().join()提取所有类别的名称 only ，这将返回一个您可以显示的字符串。

<li v-for="pproduct in pproducts" :key="pproduct.id">
    <span>{{ pproduct.title }}</span>     
    <span><strong>Kategoria: {{ product.pcategories.map(c=>c.pcategoryname).join(', ') }}</strong></span>
    <span class="price">{{ pproduct.price }} zł</span>
</li>

如何在vue.js中获取嵌套的JSON数据

2 个答案: