vue响应式的注意事项

在html中出现无法显示对象属性的情况，可能是需要在初始化对象时，先定义好属性。

<template>
  <div>
    <div v-else class="req-more">
      <div class="line"></div>
      <p class="p-header">回单信息：</p>
      <van-card>
        <div slot="thumb">
          <img :src="feedBackData.img" alt="" class="card-img"/>
        </div>
        <div slot="title">
          <span style="">卡号：{{feedBackData.colorCode}}</span>
          <span class="req-feedback" style="color: red">{{feedBackData.acceptDate}}</span>
        </div>
        <div slot="desc" style="margin: 15px 0">
          <span>版价：{{feedBackData.price}}</span>
          <span class="req-feedback">{{feedBackData.sendSatus}}</span>
        </div>
        <div slot="tags">
          <span>价格：{{feedBackData.samplePrice}}</span>
          <span class="req-feedback">
            <van-button class="bt-check bt-bright" @click="goSupplier">
               查看
            </van-button>
          </span>
        </div>
        <div slot="footer" v-if="express.number" style="padding: 20px 0">
          <span style="float: left;line-height: 30px">物流信息：{{express.company}}|{{express.number}}</span>
          <span class="req-feedback">
            <van-button class="bt-check bt-bright" @click="copyNumber">
             复制快递单号
          </van-button>
          </span>
        </div>
      </van-card>
    </div>
  </div>
</template>

<script>
import {formatDate, CUSTOMIZE, TYPE, CLOTHSTYLE, SENDSTATUS, BASEURL, API, pushHistory} from '../../assets/js/common.js'
import {handleClipboard} from '../../assets/js/clipboard'
import BigImg from '../../../src/components/BigImg'

export default {
  components: {'big-img': BigImg},
  data () {
    return {
      feedBackData: {  // 初始化的时候就要带有属性，如果只是 feedBackData:{}, 然后在getFeedBackData()方法中写入属性-值 键值对，在html中是不会自动响应更新的！！  'img': '',
        'colorCode': '',
        'price': '',
        'samplePrice': '',
        'acceptDate': '',
        'sendSatus': ''
      },
      express: {}
    }
  },
  created () {
    this.flag = sessionStorage.getItem('flag')
    this.providerId = sessionStorage.getItem('providerId')
    this.inquiryId = sessionStorage.getItem('inquiryId')
    if (this.flag === 'g') { // 已经接单了，可以获取回单信息
      this.getFeedBackData()
    }
  },
  methods: {
    getFeedBackData () { // 获取回单信息
      let url = API + '/show.do?'
      let formdata = {
        'cmd': 'getInquiryReceiptList',
        'userId': this.providerId,
        'page': 0,
        'pageSize': 10,
        'inquiryId': this.inquiryId,
        'status': -1
      }
      if (this.providerId <= 0 || this.inquiryId <= 0) { // Id异常
        alert('this.providerId:' + String(this.providerId) + ',this.inquiryId:' + String(this.inquiryId))
        return false
      }
      this.axios.post(BASEURL + url, this.qs.stringify(formdata)).then(res => {
        if (res.exId) {
          alert(res.desc)
        } else {
          // item.receiptList[0]?item.receiptList[0].colorCardCode||'':''
          this.feedBackData['img'] = res.data.list[0] ? res.data.list[0].imgUrlListValue[0] : require('../../assets/zsi.png')
          this.feedBackData['colorCode'] = res.data.list[0] ? res.data.list[0].colorCardCode : 'ASD00000000'
          this.feedBackData['price'] = String(res.data.list[0].unitPrice) + '/米'
          this.feedBackData['samplePrice'] = String(res.data.list[0].samplePrice) + '/米'
          this.feedBackData['acceptDate'] = formatDate(res.data.list[0].createTime)
          this.feedBackData['sendSatus'] = SENDSTATUS[res.data.list[0].status]
        }
      })
    }
  }
}
</script>

<style scoped>
  @import '../../assets/css/mycss.css';
</style>

 

 

参考官方文档

https://cn.vuejs.org/v2/guide/reactivity.html#%E6%A3%80%E6%B5%8B%E5%8F%98%E5%8C%96%E7%9A%84%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9