Как обновить переменную только в текущей итерации vue?

Question

[Вячеслав]

привет всем!

Есть вот такой незамысловатый код компонента vue

<li v-for="(comment, index) in comments" :key="index" class="c">\
	<textarea @click="clickTextarea()" :style="clicked ? active : passive"></textarea>\
</li>\

data: function () {
	return {
		clicked : false,
		active: 'height:auto; ',
		passive: 'height:22px; '
	}
},
methods: {
	clickTextarea: function() {
		this.clicked = true;
	}
}

смысл в том есть массив комментариев, вложенный, выведенный деревом
и в каждом комментарии есть своя textarea, которая по умолчанию имеет clicked = false, style = passive
при клике на эту текстареа, clicked становится true и соответственно style меняяется на active

но вот проблема в том, что clicked = true применяется на весь уровень комментариев, а не только на текущую итерацию
как ему сказать чтобы только для текущего textarea сделалать clicked = true?

Answer 1

[0xD34F]

У каждого комментария должен быть свой clicked, а не один на всех.

Добавляете в компонент свойство - активный комментарий:

data: () => ({
  ...
  activeComment: null
})

При клике по textarea назначаете этому свойству в качестве значения соответствующий комментарий. Стили назначаете в зависимости от равенства activeComment и текущего комментария:

<li v-for="comment in comments">
  <textarea
    @click="activeComment = comment"
    :style="activeComment === comment ? active : passive"
  ></textarea>
</li>

Comments

[Вячеслав]

хм. т.е. нет возможности указать нечто key.clicked ? или передать this в функцию clickTextarea?

[0xD34F]

Можно написать @click="clickTextarea(comment)" - и в обработчике у вас будет объект комментария, которому можно будет назначить его clicked. Типа так.

Или только одна textarea может находиться в "кликнутом" состоянии? Не очень понятен этот момент.

[Вячеслав]

0xD34F, находится могут несколько, но по нажатию свойство должно менять только у 1
все бы ничего в Вашем примере, смущает только это:

{ clicked: false },
      { clicked: false },
      { clicked: false }

а вообще логичное и красивое решение предложили выше :)

[0xD34F]

Ну раз несколько - то у каждого должен быть свой clicked, как иначе вы собираетесь отличать кликнутые от не кликнутых?

[Вячеслав]

0xD34F, см вариант выше, там логика немного другая сделана, но сделано просто и круто)

[0xD34F]

Вячеслав, да, я вижу вариант выше - там отслеживается последняя кликнутая textarea. Каким образом это позволит устанавливать в кликнутое состояние несколько полей ввода сразу - непонятно.

UPD. А-а-а, понял, что вы имели в виду под "находится могут несколько" - вообще, а не одновременно, как я подумал. Да, затупил я.

Дополнил ответ.

[Вячеслав]

0xD34F, да, в смысле по клику активируется только 1 поле, но при этом, до этого могли быть клики и по другим и они будут активные, но это не так важно :)

в общем изначально цель была активировать текущий кликнутый textarea, а в моем варианте клик активировал цепочку, потому что переменная clicked была глобальна для всех :)
в любом случае спасибо что откликнулись, вы мне помогаете уже не первый раз :)

Answer 2

[Evgeny Kulakov]

<li v-for="(comment, index) in comments" :key="index" class="c">\
  <textarea @click="currentIndex=index" :style="currentIndex == index ? active : passive"></textarea>\
</li>

data: function () {
  return {
    currentIndex : -1,
    active: 'height:auto; ',
    passive: 'height:22px; '
  }
}

Comments

[Вячеслав]

абалдеть. век живи, век учись) в очередной раз низкий поклон!