Переопределить действие тэга в блоке VueJS

Question

Создаю лист ссылок в одном из компонентов

<a :href="'/catalog/category/edit?id=' + node.id" class="label font-weight-bold">{{ node.name }}</a>

вывожу вот так в родительском компоненте:

 <tree :tree-data="tree"></tree>

В итоге у меня есть отрендеренный блок div заполненный ссылками. Мне нужно, что бы, при нажатии на ссылку происходил не переход на другую страницу, а просто эта ссылка меняла цвет и отдавала мне node.id и node.name.

Как это реализовать?

Answer 1

data() {
  return {
    activeLink: null
  }
},
methods: {
  addActiveLink(node, index) {
    this.activeLink = index
    console.log(node)
  }
}

.active {
  color: red;
}

<a @click.prevent="addActiveLink(node, index)" v-for="(node, index) in nodes" :key="index" :href="'/catalog/category/edit?id=' + node.id" class="label font-weight-bold" :class="activeLink === index && 'active'">{{ node.name }}</a>

БЛОГ НА HUSL

Переопределить действие тэга в блоке VueJS

Ответы (1 шт):