Question

大家下午好。谢谢你读这个。我正在尝试填充项目列表。 objects1是具有多个数据的项目数组，包括用于获取项目图片的URL。问题是我只看到空白而不是更新的图片。当我点击＆＃34;返回＆＃34; （按钮转到上一页），我能够看到所有图片一秒钟在显示上一页之前。

 <template>
   <div v-for="item in itemList">
    <div class="item-picture" :style="{ 'backgroundImage' : 'url(' + 
      item.picture + ')' }"></div>
      <p>{{item.name}}</p>
      <p>{{item.address}}</p>
    </div>
  </div>
 </template>

<script>
   import axios from 'axios'

   export default {
   name: ‘name1’,
   props: [
      ‘objects1’
   ],
   data () {
     return {
        objects2: [],
     }
   },
   watch: {
    objects1: function () {
      this.objects2 = this.objects1
      for (let i = 0; i < this.objects2.length; i++) {
        this.getPic(this.objects2[i].url, i)
      }
    },
  },
  mounted () {
  },
  updated () {
  },
  methods: {
    getPic (url, index) {
      let _this = this
      axios.get(url)
      .then((res) => {
          _this.objects2[index].picture = res.data.url
        }
      })
      .catch((error) => {
      })
    },
  }
}

Answer 1

尝试使用Vue.set并查看文档中的更改检测警告（https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats）

而不是

_this.objects2[index].picture = res.data.url

使用

Vue.set(this.objects2[index], 'picture', res.data.url)

仅在单击Vuejs后获取数据

1 个答案: