#运行环境为.vue#试过data那里把属性设为0 return输出默认值(没用），但是我commodityList数组里已经包含了呀

Question

#在研发APP首页的时候，hbuilder在渲染期间访问了属性“name”"pprice""oprice""discount"，但未在实例上定义。以下为我的报错图片：

以下为我的CommodityList.vue

<template>
    <view class='commodity-list'>
        
        <!-- 商品列表组件(里面包含单个商品组件) -->
        <Commodity :dataList='commodityList'></Commodity>
        
    </view>
</template>

<script>
import Commodity from './Commodity.vue'
export default {
    data () {
        return {
            commodityList:[
                {
                    id:1,
                    imgUrl:"../../static/img/commodity1.jpeg",
                    name:"快来开启智悦之旅!",
                    pprice:"299",
                    oprice:"1299",
                    discount:"5.2"
                },
                {
                    id:2,
                    imgUrl:"../../static/img/commodity2.jpg",
                    name:"快来开启智悦之旅!",
                    pprice:"299",
                    oprice:"1299",
                    discount:"5.2"
                },
                {
                    id:3,
                    imgUrl:"../../static/img/commodity3.jpeg",
                    name:"快来开启智悦之旅!",
                    pprice:"299",
                    oprice:"1299",
                    discount:"5.2"
                },
                {
                    id:4,
                    imgUrl:"../../static/img/commodity4.png",
                    name:"快来开启智悦之旅!",
                    pprice:"299",
                    oprice:"1299",
                    discount:"5.2"
                }
            ]
        }
    },
    components:{
        Commodity
    }
}
</script>

<style>
</style>

#运行环境为.vue
#试过data那里把属性设为0 return输出默认值(没用），但是我commodityList数组里已经包含了呀，不知道要怎么定义，上网搜又有点看不懂，request help

Answer 1

结合GPT给出回答如下请题主参考
首先，让我们来了解一下Vue.js中的数据绑定和计算属性的概念。

在Vue.js中，我们可以通过定义data属性来存储和访问组件的数据。当data属性中的数据发生变化时，Vue会自动更新DOM中对应的内容。计算属性是Vue.js中的一种特殊属性，它可以根据依赖的数据动态计算出一个新的值，并且会根据依赖的数据变化而自动更新。

现在让我们来解决你提到的问题。你希望在commodityList数组里的数据为空的情况下，输出一个默认值。为了实现这个功能，我们可以使用计算属性来动态地生成一个默认值。

首先，在Vue组件的data中定义commodityList数组，并将其初始值设为空数组：

data() {
  return {
    commodityList: []
  }
}

接下来，我们使用计算属性来生成一个默认值。假设我们希望默认值为"默认商品"，我们可以使用一个计算属性来动态生成这个默认值。计算属性使用关键字"computed"来定义，并返回一个根据依赖数据计算出的新值。

computed: {
  defaultItem() {
    if (this.commodityList.length === 0) {
      return "默认商品";
    } else {
      // 如果commodityList不为空，返回第一个商品的名称
      return this.commodityList[0].name;
    }
  }
}

在上面的代码中，我们首先判断commodityList数组的长度是否为0，如果是，则返回"defaultItem"，否则返回commodityList数组中第一个商品的名称。

最后，在模板中使用计算属性的值进行展示。在Vue.js中，我们使用{{}}语法来插入计算属性的值。

<template>
  <div>
    <p>默认商品: {{ defaultItem }}</p>
  </div>
</template>

以上就是一个简单的实现了在commodityList数组为空时输出默认值的Vue组件。当commodityList数组为空时，页面将展示"默认商品"，否则展示commodityList数组中第一个商品的名称。

希望以上解释能够帮助到你，如果有任何疑问，请随时追问。