H5W3
当前位置:H5W3 > 问答 > 正文

我的Vue代码中v-for为什么不更新界面?

代码用的是官方默认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>

回答

ProductItem初始化一个list数组

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

本文地址:H5W3 » 我的Vue代码中v-for为什么不更新界面?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址