V-модель, заполненная методом, не обновляющим DOM

Question

Я новичок в VueJs (Vue 2). У меня есть проблема здесь. У меня есть таблица, где я динамически заполняю данные, как это.

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

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

Когда я console.log продукта, я вижу, что объект продукта обновляется с новым значением. Но дом не обновляется. Как,

this.product выглядит следующим образом.

{
  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"
}

Но в 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-0.png"
  saved: false
  sku: "50105"
  title: "Interstellar Ceiling Lamp"
}

Не могли бы вы помочь мне решить эту проблему?

Спасибо, Vandanaa

Answer 1

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

Я догадался, что ваш product.indicatorImg не был просмотрен Vue, поэтому он не будет обновлять DOM.Пытаюсь добавить this.$forceUpdate() в конце.Это заставит Vue обновить DOM.

Answer 2

Поскольку вы используете Vuex, вы должны получать свои продукты непосредственно из своего магазина, как в вычисленном свойстве в определении Vue. Это обновит данные напрямую из хранилища без каких-либо действий со стороны vue.

{
...
computed:{
   ...mapGetters({
     queueProducts : 'queueProducts'
   })
}
...
}

Кроме того, если вы используете vuex, постарайтесь сохранить свою логику в своем магазине. Вы должны отображать только данные.

Обращайтесь к документации по vuex, чтобы знать, когда и где вы должны использовать Получатели, Мутации и Действия .

Надеюсь, что это поможет.