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

Question

[svilkov87]

Всем привет.

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

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?

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

Спасибо.

Comments

[0xD34F]

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

И не написали. Что должен считать ваш счётчик? - это понять затруднительно, есть разные варианты.

[svilkov87]

0xD34F, подкорректировал вопрос.

[Николай Чуприк]

svilkov87, всё равно не понятно. Если вам надо хранить состояние счётчика каждой кнопки отдельно, то вариантов нет кроме того, который вы описали как нежелательный (ну или с его вариациями, типа отдельного массива для counter).

[svilkov87]

Николай Чуприк,

ну или с его вариациями, типа отдельного массива для counte

А это как?

[Николай Чуприк]

data: {
    items: [ // эти элементы вывожу в шаблоне циклом потом
      { title: 'click' },
      { title: 'click' },
      { title: 'click' }
    ],
    counter: [0, 0, 0]

но это некошерно

[svilkov87]

Николай Чуприк, да, пожалуй, не кошерно

Answer 1

[0xD34F]

Если вы хотите независимые счётчики - так или иначе, но у каждого должно быть отдельное свойство 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>

Answer 2

[imhuman]

Сделать счетчик отдельным компонентом

Comments

[svilkov87]

Да, кстати.