Question

我是VueJs的新手。（vue 2）。我在这里有问题。我有一个表，我在其中动态填充这样的数据。

library(purrr)
keep(df, map_lgl(df, ~ any(.x > 0.6)))

<tbody>
      <tr v-bind:key="queProduct.value" v-for="queProduct in queueProducts">
        <td class="has-text-centered">
                        <figure class="image is-48x48">
            <img :src="queProduct.image" alt="Placeholder image">
                        </figure>
        </td>
        <td><span>{{queProduct.title}}</span></td>
        <td class="has-text-centered"><a class="has-text-link">
          <span class="icon is-size-4" @click="openModalPopup(queProduct.id)">
                            <i class="fa fa-edit" />
          </span>
        </a>
        </td>
                     <td class="has-text-centered"><a class="has-text-link">
          <span class="icon is-size-4" @click="openModalPopup(queProduct.id)">
            <img :src="queProduct.indicatorImg" />
          </span>
        </a>
        </td>
        <td class="has-text-centered"><a class="delete is-large has-background-link" @click="removeFromQueue(queProduct.id)"></a></td>
      </tr>
            </tbody>

当我console.log产品时，我看到产品对象正在用新值更新。但是dom并没有更新。喜欢，

this.product看起来像这样。

methods:{
  loadQueue(){

    const indicators = store.get('productIndicators');
    if(indicators === undefined){
      store.set('productIndicators', []);
    } else {
      this.savedProprogressIndicators = indicators;
    }
    this.queueProducts.forEach(product => {
      product.indicatorImg = indicatorImgBaseUrl +'Level-0.png';
      this.savedProprogressIndicators.forEach(indicator => {
        if(indicator.id === product.id){
          product.indicatorImg = indicatorImgBaseUrl +indicator.image;
        }
      })
    })
  }
}

但是在DOM中，它看起来像这样

{
  id: "d6dd8228-e0a6-4cb7-ab83-50ca5a937d45"
  image: "https://zuomod.ca/image/cache/catalog/products/2018/Single/medium/50105-1-800x800.jpg"
  inQueue: false
  indicatorImg: "https://cdn.shopify.com/s/files/1/0003/9252/7936/files/Level-2.png"
  saved: false
  sku: "50105"
  title: "Interstellar Ceiling Lamp"
}

您能帮我解决这个问题吗？

谢谢，凡达娜

Answer 1

在使用Vuex时，应该像在vue定义中的计算属性中那样直接从商店中获取产品。这将直接从存储中刷新数据，而不会从vue端采取任何措施。

"Microsoft.AspNetCore.All

此外，如果您正在使用vuex，请尝试将逻辑保持在商店内。您应该只显示数据。

查看vuex文档以了解应何时何地使用 字母，变异和动作。

希望获得帮助。

Answer 2

this.queueProducts.forEach(product => {
  ...
  ...
  ...
}
this.$forceUpdate(); // Trying to add this code

我猜想您的product.indicatorImg没有受到Vue的监视，因此它不会更新DOM。最后尝试添加this.$forceUpdate()。它将强制Vue更新DOM。

在不更新DOM的方法中填充的V模型

2 个答案: