В 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.info('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>

Взгляните на это, надеюсь, это поможет.

— 06.11.2018 05:35

javascript vue.js

06.11.2018 05:22

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 514

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

В vue.js вы обычно не управляете DOM в javascript; Если вы хотите условно показать компонент, вы можете использовать Директивы v-if или v-show; А также вы должны определить свои функции как methods вместо data:

new Vue ({
  el: '#app',
  data: {
    showNewButton: false
  },
  methods: {
    oldButton: function () {
      this.showNewButton = true;
    },
    
    newButton: function () {
      console.info('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>

06.11.2018 05:36

Ответ принят как подходящий

Если вы хотите иметь набор кнопок:

const app = new Vue({

  el: '#app',

  data: {
    btns: []
  },

  methods: {
    addBtn() {
      this.btns.push({
         name: 'Dynamic Button'
      })
    },
    showMsg(index) {
      console.info('Hello World!, from Button ' + index)
   }
  }

})

А также:

<div id = "app">    
  <ul>
     <li v-for = "(btn, index) in btns">
        <button  @click = "showMsg(index)" type = "text"> {{ btn.name}}</button>             
     </li>
  </ul>    
<button @click = "addBtn">Add Button</button>    
</div>

Большое спасибо, вот что я думаю

— 06.11.2018 06:24

06.11.2018 06:05