Не работают некоторые компоненты Vue.js

218

07 февраля 2020, 22:30

По каким-то причинам не работает. В консоли огромная ошибка. Вроде бы делаю также как и в официальной документации. Кто может дать ответ?

new Vue({ 
  el: "#app", 
 
  data: { 
    eventInfo: "click" 
  }, 
 
  methods: { 
    someEvent: function() { 
      console.log("Hello!"); 
    } 
  } 
});

<div id="app"> 
  <p v-on:[eventInfo]="someEvent"></p> 
</div> 
 
<script src="https://cdn.jsdelivr.net/npm/vue"></script> 
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

Answer 1

Ты пытаешься сделать динамический v-on, но у него другой синтаксис: v-on="{ someEvent: someAction }"

Ответ на твой вопрос тут.

new Vue({ 
  el: "#app", 
 
  data: { 
    eventInfo: "click" 
  }, 
 
  methods: { 
    someEvent: function() { 
      console.log("Hello!"); 
    } 
  } 
});

<div id="app"> 
  <button v-on="{ [eventInfo]: someEvent }">Click!</button> 
</div> 
 
<script src="https://cdn.jsdelivr.net/npm/vue"></script> 
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>