Question

我正在处理vue js中的点击事件问题。我甚至点击了其中包含另一个元素的元素。

这是我的代码：

<span class="pull-down-controller" @click="pullDown($event)">
     <span class="indicator">－</span> Controller
</span>

在前端将显示－ Controller 如果单击控制器一词，它将调用指定的函数pullDown()，但是为什么每次单击指示器或减号时它都将不执行任何操作，即使它位于<span>内也是如此。我参加了@click事件吗？

我在其中放入<span>以便使用jquery将符号更改为＋的原因。

谢谢！

Answer 1

不需要jQuery，Vue的反应性即可满足您的所有需求：

new Vue({
  el: '#app',
  template: `
  <span @click="pullDown" style="font-size: 48px;">
     <span>{{ indicator }}</span> Controller
</span>
`,
  data () {
    return {
      expanded: false
    }
  },
  computed: {
    indicator () {
      return this.expanded ? '+' : '-'
    }
  },
  methods: {
    pullDown (event) {
      this.expanded = !this.expanded
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

v-on：单击问题，如果元素中包含另一个元素

1 个答案: