Блог

Главная - Вопросы по программированию - V-модель, заполненная в методе, не обновляющем DOM

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

#vue.js #vuex

#vue.js #vuex

Вопрос:

Я новичок в 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;
        }
      })
    })
  }
}

Когда я запускаю консоль.регистрируйте продукт, я вижу, что объект product обновляется с новым значением. Но dom не обновляется. Нравится,

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

Комментарии:

1. Не могли бы вы предоставить код, который возвращает queueProducts ?

2. У меня есть queueProducts, объявленные в разделе data, подобном этому ` data() { return { queueProducts:[] } }`, и заполняемые в функции загрузки, подобной этому ` this. queueProducts = store.get(‘queueProducts’);`

3. Привет, Ванданаа. Прав ли я, полагая, что вы также используете Vuex в своем проекте, или вызов ‘store’ является чисто случайным? Просто хотел уточнить это, прежде чем продолжить.

4. Я думаю, что это, хранилище связано с vues

5. да, я использую хранилище electron, поскольку это приложение vue-electron

Ответ №1:

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

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

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

Загляните в документацию vuex, чтобы узнать, когда и где вам следует использовать геттеры, мутации и действия.

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

Ответ №2:

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

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