请教Vue中的v-for循环为什么无论我用什么方法都不更新视图呢？

Question

代码用的是官方默认helloworld模板
ProductItem一开始是空对象，通过接口赋值给list属性，然后无论我使用this.$set也好，还是通过v-if来渲染，都没效果。
有什么办法解决？

<template>
  <div class="hello">
      456
    <view v-if="sign" v-for="(oItem,index) in ProductItem.list" :key="index" 
                            :id="index" 
                            :data-opid="oItem.id" :data-marketprice="oItem.marketprice" :data-title="oItem.title"
                            :style="oItem.select ? 'background-color: rgba(214, 34, 56, 0.04);border:1px solid #D0021B;font-size:13px;color: #D0021B' : 'background-color: #fff;border:1px solid #999;font-size:13px;color: #333'" 
                            >{{oItem.title}}</view>
                            <button @click="ddd">点击</button>
  </div>
</template>

<script>
import _ from "lodash";
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      sign:false,
      ProductItem:{}
    }
  },
  mounted(){
  //    let arr = _.chunk(['a', 'b', 'c', 'd'], 3);
  //    console.log(arr)
  },
  methods:{
      ddd(){
          this.$set(this.ProductItem,"list",[
                  {
                      "id":1,
                      "marketprice":100,
                      "title":"test1",
                      "select":false
                  },
                  {
                      "id":2,
                      "marketprice":100,
                      "title":"test2",
                      "select":false
                  },
                  {
                      "id":3,
                      "marketprice":100,
                      "title":"test3",
                      "select":false
                  }
              ])
            /*
          this.ProductItem.list = [
                  {
                      "id":1,
                      "marketprice":100,
                      "title":"test1",
                      "select":false
                  },
                  {
                      "id":2,
                      "marketprice":100,
                      "title":"test2",
                      "select":false
                  },
                  {
                      "id":3,
                      "marketprice":100,
                      "title":"test3",
                      "select":false
                  }
              ];*/
            console.log(this.ProductItem)
              this.sign=true
      }
  }
}
</script>

Answer 1

给ProductItem初始化一个list数组

data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      sign:false,
      ProductItem:{
        list: []
      }
  }
}

Answer 2

控制台应该一进页面就报错了吧，v-for
ProductItem.list 初始值是 undefined

Answer 3

view标签是小程序的吧，你换成div就可以正常显示了

Answer 4

1. ProductItem 应该初始化为 { list: [] }
2. :key 不要用 index，应该换成对象中的唯一标识字段
3. 由于有 1，所以不需要 $set，直接 ProductItem.list = ... 就可以了