Vue Reactivity issue, setting array element property

Question

I'm having a reactivity issue in following example. I can't find what I'm doing wrong. Am I setting the vue data correctly or do I need to do something else?

I have an object model as follows;

export default {
  data () {
    return {
      filteredSkillTiers: [{
        name: '',
        categories: [{
          name: '',
          recipes: [{ name: '', profit: '' }]
        }]
      }],
      recipeFilterText: ''
    }
  }

In created() method, I fill this filteredSkillTiers with real data. When I check as console.log(this.FilteredSkillTiers), it seems fine.

And, in my template, I have a button with @click="CalculateRecipe(i, j, k) which seems to be working perfect.

Here is my template;

<div
  v-for="(skilltier,i) in filteredSkillTiers"
  :key="i"
  >
    <div
    v-if="isThereAtLeastOneFilteredRecipeInSkillTier(skilltier)"
    >
      <h3> {{ skilltier.name }} </h3>
      <div
      v-for="(category,j) in skilltier.categories"
      :key="j"
      >
        <div
        v-if="isThereAtLeastOneFilteredRecipeInCategory(category)"
        >
          <v-simple-table
          dense
          class="mt-3"
          >
            <template v-slot:default>
              <thead>
                <tr>
                  <th class="text-left">{{ category.name }}</th>
                  <th class="text-left">Click to Calculate</th>
                  <th class="text-left">Estimated Profit</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(recipe,k) in category.recipes" :key="k">
                  <template
                  v-if="recipe.name.toLowerCase().includes(recipeFilterText.toLowerCase())"
                  >
                  <td>{{ recipe.name }}</td>
                  <td>
                    <v-btn
                    dense
                    small
                    @click="CalculateRecipe(i, j, k)"
                    >
                      Calculate
                    </v-btn>
                  </td>
                  <td>{{ filteredSkillTiers[i].categories[j].recipes[k].profit }}</td>
                  </template>
                </tr>
              </tbody>
            </template>
          </v-simple-table>
        </div>
      </div>
    </div>
  </div>

And here is my method;

CalculateRecipe (skilltierIndex, categoryIndex, recipeIndex) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve('profitResult')
        }, 50)
      }).then((profit) => {
        this.filteredSkillTiers[skilltierIndex].categories[categoryIndex].recipes[recipeIndex].profit = 'new Profit'
        console.log(this.filteredSkillTiers[skilltierIndex].categories[categoryIndex].recipes[recipeIndex].profit)
      })
    },

When I log to console, I can see that I'm modifying the object correctly. But my updated value is not reflected in the rendered page.

There is this thing I suspect, if I update an irrevelant component in this page (an overlaying loading image component), I can see that rendered table gets updated. I want to avoid that because updating a component returns me to top of the page.

<td>{{ filteredSkillTiers[i].categories[j].recipes[k].profit }}</td>

This profit property seems not reactive. I'm really confused and sorry that I couldn't clear the code more, Thanks.

score 0 · Answer 1 · edited Jul 16 '22 at 03:34

0

Here's the article describing how exactly reactivity works in Vue 2.x. And yes, (in that version) you should never update a property of tracked object directly (unless you actually want the changes not to be tracked immediately).

One way (mentioned in that article) is using Vue.set() helper function. For example:

Vue.set(this.filteredSkillTiers[skilltierIndex]
  .categories[categoryIndex].recipes[recipeIndex], 'profit', 'new Profit');

You might consider making this code far less verbose by passing recipe object inside CalculateRecipe function as a parameter (instead of those indexes), then just using this line:

Vue.set(recipe, 'profit', promiseResolutionValue);

edited Jul 16 '22 at 03:34

tao

82,996
16
114
150

answered Sep 24 '20 at 21:15

raina77ow

103,633
15
192
229

Thanks, I have replaced those index parameters with recipe itself. And I tried Vue.set(recipe, 'profit', 'newProfitValue'). When I check the object, I can see that I updated the recipe, but still rendered page is not reflecting that 'newProfitValue'. Here is a screenshot of console and rendered page: https://pasteboard.co/JsCvwot.png – neiloth Sep 24 '20 at 21:37
Could you share the resulting code (after the change) in a stackblitz or some other sandbox? – raina77ow Sep 24 '20 at 21:46
I tried but I'm using vuex store and local database. I don't think we can get it work on that platform. – neiloth Sep 24 '20 at 21:50
By the way, I found a solution which I hated. I added :key="componentKey" on a wrapper div element. And I added this.componentKey += 1 on my calculateRecipe method. It forced my list to be re-rendered. It doesn't feel right, but maybe it can help us find a better solution. – neiloth Sep 24 '20 at 21:52
Ok, I created [a pen](https://codepen.io/raina77ow/pen/dyMawoV) with the code - and it works fine with me. Are you sure all the changes were applied correctly; no errors in console etc.? – raina77ow Sep 24 '20 at 22:12
Thanks for the pen, everything seems same, no error is observed. It's just Vue.set changes the value but doesn't force re-rendering. It's really strange. – neiloth Sep 25 '20 at 08:05

Vue Reactivity issue, setting array element property

1 Answers1