Vuejs中点击后才获取数据

Question

大家下午好。感谢您阅读本文。我正在尝试填充项目列表。 objects1 是一个包含多个数据的项目数组，包括用于获取项目图片的 url。问题是我只看到空白而不是更新的图片。当我单击 "back"（转到上一页的按钮）时，我可以看到所有图片一秒钟在显示上一页之前。

 <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中点击后才获取数据

Getting data only after click in Vuejs

api

vue.js

axios