<img> v-bind:src不能成功渲染

Question

比如我一个页面的初始化数据里定义一个空对象

 data () {
      return {
        community: {},
      }
    },

而我的<img>标签的写法是

 <img class="uploadImageDiv" mode="aspectFill" :src="community.avatarUrl"/>

当我第一次给community赋值的时候

this.community.avatarUrl = 'XXXXX.png'

讲道理img标签会立即渲染吧？ 但是并没有。为什么呢？
估计跟我定义了一个对象有关? 因为我如果直接在data里定义一个avatarUrl='XXXXX.png'且 <img class="uploadImageDiv" mode="aspectFill" :src="avatarUrl"/>的时候是可以直接渲染的

Answer 1

因为压根没有观察community.avatarUrl这个属性。
set

  community: {
    avatarUrl:''
    },

或者

this.community= {avatarUrl :'XXXXX.png'}

Answer 2

没渲染出来 说明你讲道理没有跟vue讲通，1.直接在data定义img的src的路径，2.如果想this.community.avatarUrl这种方法，请查看vue新增对象的响应式怎么写

Answer 3

this.$set(this.community,"avatarUrl","xxx.png")

vue监测不到对象新增属性，要不就再定义的时候就定义号 如同楼上写的
文档里都有。。

Answer 4

没渲染出来 说明你讲道理没有跟vue讲通

Answer 5

由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除
正确的写法
this.$set(this.community,'avatarUrl', 'XXXXX.png');

Answer 6

多谢各位大佬！ 很清楚!