VueJS Кнопка внутри Div со ссылкой также запускает ссылку href - PullRequest
Новая
       4

VueJS Кнопка внутри Div со ссылкой также запускает ссылку href

1 голос
/ 20 апреля 2020

My html

<a href="/someplace">      
  <div>
    <vuecomp></vuecomp>
    <span>Click row for more info</span>
  </div>
</a>

Тогда Vue компонент как таковой ... 

<template>
  <div @click.stop="doAction">
  </div>
</template>

Когда doAction вызывается, ТАКЖЕ запускает <a href=""> из его родительское отделение Как я могу остановить это от этого? Я не хочу, чтобы родительский div стал частью компонента, это просто табличное представление. Я пробовал @click.stop и передавал doAction(event) с event.stopPropagation();

Любые другие идеи, кажутся простыми, иметь кнопку в строке щелчка, используя vuejs?

Ответы [ 3 ]

2 голосов
/ 20 апреля 2020

Добавить пустой обработчик к событию click на привязке с модификатором предотвращением: 

 <a href="/someplace" @click.prevent="">


let app = new Vue({
  el: "#app",

  data() {
    return {


    };
  },
  methods: {
    doAction() {

      console.log("do action")
    }
  }

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <a href="/someplace" @click.prevent="">
    <div>
      <div @click="doAction">
      do action
      </div>
      <span>Click row for more info</span>
    </div>
  </a>

</div>
1 голос
/ 20 апреля 2020

Вы хотите отключить поведение по умолчанию. Так что вам нужно .prevent 

<template>
  <div @click.prevent="doAction">
  </div>
</template>
0 голосов
/ 20 апреля 2020

То, что вы хотите сделать, это превратить родительский тег <a> в простой <div> и прикрепить к нему событие, используя модификатор .self. Таким образом, щелчок будет обрабатываться только тогда, когда вы нажали на самого родителя div, а не когда вы нажали на любой из дочерних элементов внутри него. 

<div href="/someplace" @click.self="yourEventToOpenTheRow">      
  <div>
    <vuecomp></vuecomp>
    <span>Click row for more info</span>
  </div>
</div>
...