Qfyilyi

I am currently generating a table which lists problems encountered during the selected test using a component generated with this code:

<tr is="entry" v-for="problem in problems" :key="problem.id" v-bind:foo="problem"></tr>

Each problem corresponds to an item whose relevant information is contained within the problem dictionary and referenced in the first few columns of the table. Since the same item can have multiple problems, the same item can appear in multiple rows of the table. Now, each row features some buttons which allow you to modify the underlying item so as to fix the problems.

Whenever I modify one of those underlying items I need to modify it in all the rows, which i do by calling a function in the parent component, but modifying the data inside of the dictionary does not seem to trigger any of my watches or computes inside of the child component, which currently looks something like this:

Vue.component('entry', {

  props: ['foo'],

  data: function(){ 

    //does some computations

    return data

  },

  watch:{

    foo: function(){

      this.recompute_entry()

    },

  },

  methods:{

    //various methods, including:

    recompute_entry: function(){

      //updates the data according to changes brought to the entry

    },

  },

});

I have attempted to include a different prop which i could bind to an entry in a list in my parent component but, besides being pretty clunky, that didn't end up working either, which makes me think I might've gotten something wrong with my component.

Ultimately, I have relied on the fact that v-for iterates through my list in an orderly fashion, which combined with the fact that I generate no other children in my parent component means that a child component would have the same index in my component's children array as it would in my problems array. Therefore I can use this:

this.$children[problem_index].recompute_entry();

Which kind of feels hack-ish and unreliable, but actually works, for once. Is there no alternative safer method to recalculate my child components based on changes made to their props? I really feel there has to be.

I probably would need to see the exact implementation but it sounds like you need to clone your dictionary to trigger the prop change, ie:

let newProblem = Object.assign({}, this.problem);

// change any nested property

newProblem.some.value = 1

// assign back the cloned and modified dictionary

this.problem = newProblem