Question

我正在尝试对锚标签（使用jQuery）做一些事情，例如单击时更改其颜色，但是我似乎找不到正确的目标。

<a v-on:click="action($event)">
    <span>entry 1</span>
    <span>entry 2</span>
</a>

正在运行的 event.target 是第一个或第二个跨度，而不是一个标记。

例如

$( $event.target ).css( "backgroundColor", "red" )

每次我单击“ a”标签-跨度之一将变为红色，但实际上没有带有v-on：click指令的“ a”标签。有没有一种方法可以将click指令定位到实际元素？

Answer 1

为什么将jQuery与vuejs结合使用？如果您使用vuejs的强大功能，则可以执行以下操作：

.clicked {
  background-color: red;
}

<a v-on:click="aClicked = true" :class="{ 'clicked': aClicked }">
    <span>entry 1</span>
    <span>entry 2</span>
</a>

Answer 2

您必须使用<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>而不是$event.target。然后，将样式分配给$event.currentTarget标签。

new Vue({
  el: "#app",
  methods: {
  	action: function($event){
    	$($event.currentTarget).css( "backgroundColor", "red" )
    }
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

v-on：单击目标不在正确元素中？

2 个答案: