Vue.js işlevleri çalışmazken gösteriliyor

Question

İşlevlerin bileşenlere aktarılmasının belgede belirtildiği şekilde çalışmadığı bir sorunum var.

Bu

benim app.js

methods: { 
    updateAnswer: function(question) { 
     console.log('question: '+question); 
    } 
} 

Bu benim html dosyası içindedir içinde:

props: [ 
    'whenanswered' 
], 

ready: function() { 
    this.whenanswered(); 
}, 

I:

<multiplechoice class="question counterIncrement counterShow active" id="q2" whenanswered="{{ updateAnswer('1') }}"></multiplechoice> 

Bu benim components.js dosyada olduğu

props: [ 
    { name: 'whenanswered', type: Function} 
]; 

: zaten bu denedi

yine de hayır şans. Ben sayfasını yüklediğinizde

Bu benim konsolda ise:

Uncaught TypeError: this.whenanswered is not a function 

Herhangi bir yardım çok mutluluk duyacağız :)

Answer 1

Bunu yapabilirsiniz:

<multiplechoice class="question counterIncrement counterShow active" id="q2" :whenanswered="updateAnswer('1')"></multiplechoice> 

olmadan ':' (aynı v bağlama gibi) yalnızca bir dize göndermek ve değerlendirmek olmaz yaptığı gibi. Bu {{ }} ile bile.

Ama updateAnswer fonksiyonu bir işlev döndürmesi gerektiğini unutmayın. Pervaneniz updateAnswer('1')'u çalıştıracağından ve multiplechoice, aslında istediği zaman yürütülecek bir işlev bekler.

methods: { 
    whenanswered: function(question) { // or whenanswered (question) { for ES6 
    return function() { ... } // or() => {...} for ES6 
    } 
} 

Answer 2

bir keman yardımcı olacağını, ancak temelde şunlar gereklidir:

methods: { 
    whenanswered: function(question) { 
     ... 
    } 
} 

Bu işlevi çağırmak için

. Bir pervane sadece bir dize, bir işlev değil.

Örnek:

<div id="app"> 
    Loading... 
    <data-table on-load="{{onChildLoaded}}"></data-table> 
</div> 

new Vue({ 
    el: "#app", 
    methods: { 
     onChildLoaded: function (msg) { 
      console.log(msg); 
     } 
    }, 
    components: { 
     'data-table': { 
      template: 'Loaded',  
      props: ['onLoad'], 
      ready: function() { 
       this.onLoad('the child has now finished loading!') 
      } 
     } 
    } 
});