时间戳

首页 > 解决方案 > 在附加（）元素之后的VueJS中，点击方法不起作用

javascript - 在附加（）元素之后的VueJS中，点击方法不起作用

问题描述

我可以在 jquery 中使用$(document).on('click', '.newButton', function(){});如何在 VUE 解决同样的问题的方法来解决这个问题

new Vue ({
  el: '#app',
  data: {
    oldButton: function () {
      $('#app').append('<button v-on:click="newButton">The New Button</button>');
    },
    
    newButton: function () {
      console.log('Hello World!');
    },
  },
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <button v-on:click="oldButton">The Old Button</button>
</div>

标签： javascriptvue.js

解决方案

在 vue.js 中，您通常不会在 javascript 中操作 DOM；如果你想有条件地显示一个组件，你可以使用v-iforv-show指令；而且您还应该将您的函数定义为，methods而不是data：

new Vue ({
  el: '#app',
  data: {
    showNewButton: false
  },
  methods: {
    oldButton: function () {
      this.showNewButton = true;
    },
    
    newButton: function () {
      console.log('Hello World!');
    },
  },
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <button v-on:click="oldButton">The Old Button</button>
  <button v-if="showNewButton" v-on:click="newButton">The New Button</button>
</div>

推荐阅读