@svilkov87

Логика для счетчика на vue — какой подход правильный?

Всем привет.

Хочу сделать счетчик, о принципах логики которого напишу сразу в коде:

new Vue({
  el: "#app",
  data: {
		items: [ // эти элементы вывожу в шаблоне циклом потом
			{ title: 'click' },
			{ title: 'click' },
			{ title: 'click' }
		],
		counter: 0 // на это значение хочу повесить инкремент, при клике на ту или иную кнопку,
//которые отрисуются потом в цикле. при этом counter 
//в шаблоне должен увеличиваться только там, где произошел клик, 
//а не во всех местах
  },
  methods: {
		goUp: function() {
			return this.counter++;
		},
		listRender: function() {
			return this.items;
		}
  }
})


Вопрос в том, что хочется использовать именно конструкцию, которая выше, а не делать что-то типа:
el: "#app",
  data: {
		items: [
			{ title: 'click',
        counter: 0
                        },
			{ title: 'click',
        counter: 0
                        },
			{ title: 'click',
        counter: 0
                        }
		]
  },


... и потом вешать инкремент на каждый counter из items.
Можно ли как-то установив один раз counter в data делать инкремент при клике на каждый элемент из массива items?

Мой ужасный код

Спасибо.
  • Вопрос задан
  • 1768 просмотров
Решения вопроса 2
0xD34F
@0xD34F Куратор тега Vue.js
Если вы хотите независимые счётчики - так или иначе, но у каждого должно быть отдельное свойство counter. Что конкретно вас в этом не устраивает - не очень понятно. Необходимость прописывать свойство вручную каждому элементу? - ну так нет необходимости делать это вручную:

data: () => ({
  items: [
    { title:  'hello, world!!' },
    { title:  'fuck the world' },
    { title: 'fuck everything' },
  ].map(n => (n.counter = 0, n)),
}),

<div v-for="n in items">
  <button @click="n.counter++">{{ n.title }}</button>
  <span>total: {{ n.counter }}</span>
</div>
Ответ написан
Комментировать
@imhuman
Сделать счетчик отдельным компонентом
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы