Как изменить класс определенного объекта из массива?

Question

[bituke]

Имеется массив с данными, который выводится циклом v-for

<div class="article" v-for="article, key in articles.slice(0, count)">
			<img :src="article.article_image">
			<h3>{{ article.title }} {{ key }} </h3>
			<p>{{ article.text }}</p>
			<p>{{ get_date(article.create_date) }}</p>
			<p>
			{{ article.like_users }}
			<svg @click='like(article.id, "like"), article.like_users+=1' title='оценить' xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
			  <path d="..."/>
			</svg>
			</p>
		</div>

Задача изменить класс, а может и другой атрибут одного из тегов этого объекта при клике на него.
Я правильно понимаю, что при клике нужно будет вызывать функцию, в которую мы будем передавать ключ объекта, потом получать как-то через js этот объект из дум дерева и уже манипулировать им как нам удобно? Или через vue это делается намного проще? Дайте пожалуйста доки если есть, я много искал, ничего меня удовлетворяющего не нашел.

Answer 1

[Сергей Соколов]

один из вариантов — сделать эту разметку внутри самостоятельным компонентом. В который через пропсы передаётся объект статьи. Самостоятельно компонент обрабатывает клик по нему и меняет класс где-то внутри себя.

другой вариант – признак «кликнутости» статьи (по умолчанию false) тоже держать в объекте artice. И при отрисовке учитывать его значение. По клику с индексом менять в исходных данных признак на true (разметка перерисуется).