Question

在以下示例中，我遇到了反应性问题。我找不到我在做什么错。我是正确设置Vue数据还是需要做其他事情？

我有一个如下的对象模型；

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

在created（）方法中，我用实际数据填充了filteredSkillTiers。当我检查为console.log(this.FilteredSkillTiers)时，看起来不错。

而且，在我的模板中，我有一个带有@click="CalculateRecipe(i, j, k)的按钮，看起来很完美。

这是我的模板；

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

这是我的方法；

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

登录控制台时，可以看到我正在正确修改对象。但是我的更新值未反映在呈现的页面中。

我怀疑有一件事情，如果我在此页面中更新了一个无关紧要的组件（叠加的加载图像组件），则可以看到渲染表已更新。我想避免这种情况，因为更新组件会使我回到页面顶部。

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

此获利属性似乎没有反应。我真的很困惑，很抱歉无法再清除代码，谢谢。

Answer 1

这里的the article描述了Vue 2.x中反应性的工作原理。是的，（在该版本中）您永远不要直接更新被跟踪对象的属性（除非您实际上希望不立即跟踪所做的更改）。

一种方法（在该文章中提到）是使用Vue.set（）帮助函数。例如：

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

您可能会考虑通过在recipe函数内部传递CalculateRecipe对象作为参数（而不是那些索引），然后仅使用此行来使此代码的详细程度降低：

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

Vue反应性问题，设置数组元素属性

1 个答案: