как изменить значение реквизита методом - Vue. js

Question

Я новичок в vue и работаю над задачей, основанной на vue. js. Я показываю свои данные в компоненте, используя опору. Теперь я хочу добавить метод увеличения количества товара.

вот мой код:

<div v-for="(products, index) in products">
  <mdc-layout-cell span="2" align="middle">
    {{ products.product_barcode }}
  </mdc-layout-cell>
<mdc-layout-cell span="2" align="middle">
  {{ products.product_quantity}}
</mdc-layout-cell>
<i class="mdc-icon-toggle material-icons float-left"
   aria-pressed="false"
   v-on:click="incrementItem(index)">
  add
</div>

вот мой JS:

export default {
    props: [
      'products',
    ],
    methods: {

      incrementItem(index) {
        let item = this.products[index];
        this.products[index].product_quantity =
          this.products[index].product_quantity + 1;
          console.log(this.products[index].product_quantity);
      },
    }

Я вижу увеличенное значение в консоли, но значение не увеличивается в соответствующей строке. Как я могу увеличить значение product_quantity? Любая помощь будет весьма заметна

Answer 1

Во-первых, с точки зрения потока vue, помните, никогда не мутируйте напрямую подпорки . Вместо этого вы должны изменить данные в родительском компоненте. Для этого рекомендуется создать копию реквизитов в дочерних данных, поэтому при нажатии на кнопку дочерние данные изменяются -> изменяются родительские данные, что также приводит к изменению дочерних реквизитов. Есть много способов сделать это. У меня нет родительского кода компонента, поэтому я создаю общий c код ниже, вы можете выполнить следующие действия:

используя syn c

в родительских компонентах

<parent :products.sync=products />

в методах дочерних компонентов:

data() {
  return {
    productListInChildren: this.products; // pass props to children inner data
  }
},
methods: {
    incrementItem(index) {
       //do modification in productListInChildren
       let item = this.productListInChildren[index];
        this.productListInChildren[index].product_quantity =
          this.productListInChildren[index].product_quantity + 1;
        // update it back to parents
        this.$emit('update:products', this.productListInChildren)
  }
}

<div v-for="(products, index) in productListInChildren"> // use productListInChildren instead
  <mdc-layout-cell span="2" align="middle">
    {{ products.product_barcode }}
  </mdc-layout-cell>
  <mdc-layout-cell span="2" align="middle">
    {{ products.product_quantity}}
  </mdc-layout-cell>
  <i class="mdc-icon-toggle material-icons float-left"
     aria-pressed="false"
     v-on:click="incrementItem(index)">
    add </i>
</div>

Второе: с точки зрения дизайна кода, в вашем случае рекомендуется, чтобы дети обрабатывали только логику c отображения (немой компонент) . Логи c изменяющихся данных должны быть перенесены на родителей (как контроллер). Если это так. Вы можете создать метод в родительском компоненте и добавить логику приращения c:

родительские компоненты

<parent :products=products @increment="incrementInParent"/>



methods: {
incrementInParent() {// move the logic here}
}

дочерние компоненты

methods: {
    incrementItem(index) {
       // call the methods in parents
       this.$emit("increment");
  }
}

Answer 2

Вы можете присвоить props значение переменной. Затем используйте его дочерний компонент.

export default {
    props: {
      products: Array,
    },
    data(){
     return {
       newProducts: this.products,
     }
   }
}

Вы должны изменить структуру props в дочернем компоненте. используйте newProducts в дочернем компоненте, и если вы обновляете данные родительских реквизитов, вы должны использовать emit для связи между дочерними элементами.

Для дальнейшего взаимодействия родительских дочерних элементов вы можете следовать этому руководству: https://www.bdtunnel.com/2018/02/vue-js-component-communication-complete.html

Answer 3

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

https://vuejs.org/v2/guide/reactivity.html

Вы можете использовать $set, чтобы шаблон реагировал на изменения в объектах и ​​массивах. Вот мой URL песочницы, который отвечает на ваш вопрос