Как сделать обработчик события только при условии?

Question

[vetsmen]

Как сделать обработчик v-on:click только при каком-либо условии?
Рендерю блоки с кнопками циклом v-for="block in blocks", внутри которых вешается обработчик v-on:cilick
Как сделать так, чтобы он вешался только при удовлетворении условия block.data == true?
Проверять в самом методе при клике считаю глупым, ибо на странице будут висеть просто так обработчики.

Answer 1

[coderisimo]

Возможно несколько решений.
Например, что мешает уже в обработчике смотреть есть ли block.data == true. Передавать block.data прямо в обработчик ? И уже в обработчике смотреть block.data == true? Если нет - обработчик дальше не работает, если да , то делает свое дело.

Есть еще возможность присваивать обработчик в зависимости от какого-то условия, т.е

<div id="app">
  <button @click="bool ? one() : two()">Click</button>
</div>

Вот пример, где обработчик вешается не на все элементы, а только на те что удовлетворяют условию:

Comments

[0xD34F]

И всё-таки - у "Two" обработчик есть (хоть ничего и не делает). Можете открыть devtools и убедиться.

[coderisimo]

0xD34F, а в случае с

v-on="{ событие: условие ? обработчик : null }"

этого не происходит? ))

[0xD34F]

Василий, не происходит.

[coderisimo]

0xD34F, странно, вообще не удается прикрутить эту конструкцию.

кстати, можно также просто использовать условный рендеринг . Рендерить две кнопки, одну с обработчиком , а другую без.

[0xD34F]

Василий,

не удается прикрутить эту конструкцию

Старайтесь лучше.

[vetsmen]

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

[coderisimo]

vetsmen,
ну , так не вешайте обработчик "на блок с множеством дочерних элементов" ))

Answer 2

[0xD34F]

v-on="условие ? { событие: обработчик } : {}"

или (но так vue будет кидать предупреждение, что обработчик "invalid")

v-on="{ событие: условие ? обработчик : null }"

Comments

[vetsmen]

v-on:click.stop="(item.status === 1) ? { sellItem(item.id, index) } : {}"

Данная конструкция не хочет работать

[Сергей delphinpro]

vetsmen,

v-on="item.status === 1 ? {'click.stop': sellItem(item.id, index)} : {}"

[0xD34F]

v-on:click.stop="(item.status === 1) ? { sellItem(item.id, index) } : {}"

Данная конструкция не хочет работать

Убил бы.

За более чем два с половиной года так и не освоили синтаксис создания объектов. Не научились различать собственно функцию и её вызов. Восхищён вашей необучаемостью.

Ну и поскольку объектный синтаксис v-on не поддерживает использование модификаторов, придётся дёрнуть stopPropagation вручную:

v-on="item.status === 1 ? { click: e => onClick(e, item.id, index) } : {}"

methods: {
  onClick(e, id, index) {
    e.stopPropagation();
    this.sellItem(id, index);
  },
  ...