Question

我正在尝试创建有关照片列表的示例，并且在调用API之后将数据绑定到组件时遇到麻烦。

JS代码：

<script>
// photo item
Vue.component('photo-item', {
   props: ['photo'],
   template: `<li>{{ photo.name }}</li>`
});

// List of photos
Vue.component('photo-list', {
   props: ['photos'],

   template: `
   <ul id="photo-list">
      <photo-item v-for="photo in photos" :photo="photo"></photo-item>
   </ul>`
});

new Vue({
   el: "#photo_detail",
   data: {
      photos: []
   },

   created: function() {
      axios
       .get('/api/photos')
       .then(function (response) {
           this.photos = response.data; // Data existed
       })
       .catch(function (err) {
           console.log(err);
       });
   }
 })
 </script>

HTML代码

<main id="photo_detail">
    <photo-list v-for="photo in photos" :photo="photo"></photo-list>
</main>

从API获取所有照片后，据我了解，变量photos将自动绑定，而VueJS将更新DOM。

VueJs 2.1.6

任何帮助。

谢谢！

Answer 1

问题与您在this中的function()值一起使用，该值的范围为axios而不是vue实例。或者您可以使用(response)=>直接使用this

new Vue({
   el: "#photo_detail",
   data: {
      photos: []
   },

   created: function() {
      var self=this;
      axios
       .get('/api/photos')
       .then(function (response) {
           self.photos = response.data; // Data existed
       })
       .catch(function (err) {
           console.log(err);
       });
   }
 })

Answer 2

您的代码不正确。

问题：

最好为每个组件定义使用的组件，例如 components: {photoItem}。
在axios回调中，您使用function，这意味着您在（this.photos）中使用了错误的上下文。使用箭头功能（() => {}而不是function () {}
指令v-for需要指令:key=""

我已经在下面修复了它。

// photo item
const photoItem = Vue.component('photo-item', {
   props: ['photo'],
   template: `<li>{{ photo.name }}</li>`
});

// List of photos
const photoList = Vue.component('photo-list', {

  // define used components
  components: {photoItem},
  props: ['photos'],
  template: `
   <ul id="photo-list">

      <!-- add :key="" directive -->
      <photo-item v-for="(photo, index) in photos" :key="index" :photo="photo"></photo-item>
   </ul>`
});


new Vue({
   el: "#photo_detail",

   // define used components
   components: {photoList},
   data: {
      photos: []
   },

   created: function() {

      // axios.get('/api/photos')
      // use arrow function
      setTimeout(() => {
		this.photos = [{name: 'Photo 1'}, {name: 'Photo 2'}];
      }, 1000);
   }
 })

<script src="https://unpkg.com/vue"></script>

<main id="photo_detail">
  <photo-list :photos="photos"></photo-list>
</main>

从API提取数据后，VueJS不会更新DOM吗？

2 个答案: