VueJS $set not making new property in array of objects reactive

Question

In my VueJS 2 component below, I can add the imgdata property to each question in the area.questions array. It works - I can see from the console.log that there are questions where imgdata has a value. But despite using $set it still isn't reactive, and the imgdata isn't there in the view! How can I make this reactive?

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);
    },

Do not mutate prop values. See vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow — Phil
– Phil, Commented Oct 7, 2020 at 3:49
Props can't be a reactive. Let me know if you still looking help — Punit Patel
– Punit Patel, Commented Oct 7, 2020 at 4:02
@Phil Yes, Phil you are right it's can't mutate from component. To change it we should use $emit. — Punit Patel
– Punit Patel, Commented Oct 7, 2020 at 4:29

Phil · Accepted Answer · 2020-10-07 04:29:29Z

2

Since area is a prop, you should not be attempting to make changes to it within this component.

The general idea is to emit an event for the parent component to listen to in order to update the data passed in.

For example

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)
    }
  }
}

And in the parent

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

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

answered Oct 7, 2020 at 4:29

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Punit Patel Over a year ago

(y) Perfect explanation :)

Punit Patel · Accepted Answer · 2020-10-07 04:03:59Z

-1

Here that variable has a value of this but it's bound under the scope of function. So, you can create reactive property in data as below :

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

Props can't be reactive so use :

that.$set(this.questions, thisIndex, thisQuestion);

And assign your API output to directly questions using this.questions.

edited Oct 7, 2020 at 4:03

answered Oct 7, 2020 at 3:45

Punit Patel

3612 silver badges12 bronze badges

3 Comments

trajekolus Over a year ago

Thanks for your answer - I think it is helpful, but will uncouple the array of questions from the area object it belongs to. PS. I didn't downvote it - perhaps there is a way to incorporate this idea

Punit Patel Over a year ago

Thanks @jdoer1997 I know many people here only for score and down voted. I don't care those peoples. I keep help people. Let me know if you still stuck.

Abbas Over a year ago

@PunitPatel I have to disagree on this point. People are not here just for the score, you would only get downvoted if somebody thinks your answer isn't either good enough or is irrelevant.

Collectives™ on Stack Overflow

VueJS $set not making new property in array of objects reactive

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related