Инкремент и декремент счетчика в текущем блоке?

Question

Добрый вечер дорогие разработчики! Как мне увеличивать текущий counter в таком цикле?

v-for="(item, index) in ticketsbuy" :key="index"

Есть метод увеличения и декремента. Но как мне увеличивать текущий counter? В реальности у меня рендерится 4-12 row div`s и в каждом есть counter.

Нужно увеличивать текущий, а не все.

Answer 1

Можно создать компонент counter для вынесения в него логики счетчика(инкремента и декремента) для каждого из объектов.

Создаем свойство counters в data, где будем хранить значения счетчиков для всех объектов из массива. На каждом шаге итерации ticketsbuy рендерим дочерний компонент counter, который будет получать текущий объект в качестве входных параметров и используя директиву v-model обеспечиваем двухстороннюю привязку между дочерним и родительским компонентом. После этого вся логику манипуляции счетчиком(инкремент и декремент) будет вынесена в дочерний компонент, который после манипуляции со счетчиком будет возвращать его значение в родительский компонент.

Вот рабочий пример для наглядности:

Vue.component('counter', {
  props: ['objcounter'],
  data() {
    return {
      counter: 0
    }
  },
  computed: {
    countervalue() {
      return {
        counter: this.counter,
        id: this.objcounter.id,
      }
    }
  },
  mounted() {
    if (this.objcounter.counter) {
      this.counter = this.objcounter.counter
      this.inputValue()
    }
  },
  methods: {
    inputValue() {
      this.$emit('input', this.countervalue)
    },
    addCounter() {
      this.counter++
        this.inputValue()
    },
    incCounter() {
      this.counter--
        this.inputValue()
    }
  },
  template: `
    <div>
      <button @click="addCounter">+</button>
      <button @click="incCounter" :disabled="counter < 1">-</button>
      текущее значение - {{ countervalue.counter }}
    </div>`
})

new Vue({
  el: '#app',
  data: {
    ticketsbuy: [{
        id: 1,
        title: 'Счетчик 1',
        counter: 11
      },
      {
        id: 2,
        title: 'Счетчик 2',
      },
    ],
    counters: []
  },
  computed: {
    totalcounters() {
      return this.counters.reduce((a, c) => a + c.counter, 0)
    }
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">

  <template v-for="(item, index) in ticketsbuy" :key="index">
  {{ item.title }}
  <counter :objcounter="item" v-model="counters[index]"></counter>
</template>
  <hr> Общее значение счетчиков = {{ totalcounters }}
  <pre>{{ counters }}</pre>
</div>

БЛОГ НА HUSL

Инкремент и декремент счетчика в текущем блоке?

Ответы (1 шт):