VueJS$set不使对象数组中的新属性反应

Question

在下面的 VueJS 2 组件中，我可以将 imgdata 属性添加到 area.questions 数组中的每个问题。它的工作原理 - 我可以从控制台中看到.log存在imgdata具有值的问题。但是，尽管使用了$set它仍然没有反应，并且imgdata不在视图中！我怎样才能使它被动？

var componentOptions = {
  props: ['area'],
  data: function() {
    return {
      qIndex: 0,
    };
  },
  mounted: function() {
    var that = this;
    that.init();
  },
  methods: {
    init: function() {
      var that = this;
      if (that.area.questions.length > 0) {
        that.area.questions.forEach(function(q) {
          Util.HTTP('GET', '/api/v1/photos/' + q.id + '/qimage').then(function(response) {
            var thisIndex = (that.area.questions.findIndex(entry => entry.id === q.id));
            var thisQuestion = (that.area.questions.find(entry => entry.id === q.id));
            thisQuestion.imgdata = response.data;
            that.$set(that.area.questions, thisIndex, thisQuestion);
          })
        });
      }
      console.log("area.questions", that.area.questions);
    },

Answer 1

这里变量的值是这个，但是它被限制在函数的范围内。因此，您可以在数据中创建反应属性，如下所示:

data: function() {
    return {
        qIndex: 0,
        questions: []
    };
}

Answer 2

因为< code>area是一个属性，所以您不应该试图在这个组件中对它进行更改。

一般的想法是发出一个事件供父组件监听，以便更新传入的数据。

例如

js prettyprint-override">export default {
  name: "ImageLoader",
  props: {
    area: Object
  },
  data: () => ({ qIndex: 0 }), // are you actually using this?
  mounted () {
    this.init()
  },
  methods: {
    async init () {
      const questions = await Promise.all(this.area.questions.map(async q => {
        const res = await Util.HTTP("GET", `/api/v1/photos/${encodeURIComponent(q.id)}/qimage`)
        return {
          ...q,
          imgdata: res.data
        }
      }))
      this.$emit("loaded", questions)
    }
  }
}

在父级

<image-loader :area="area" @loaded="updateAreaQuestions"/>

export default {
  data: () => ({
    area: {
      questions: [/* questions go here */]
    }
  }),
  methods: {
    updateAreaQuestions(questions) {
      this.area.questions = questions
    }
  }
}