親コンポーネントはVUE2

これは、Vueのはcompontが含まれているメインのhtmlファイルでのカスタムイベントに耳を傾けない親コンポーネントはVUE2

<html> 
    <head> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <!-- <link rel="stylesheet" href="styles.css"> --> 

    </head> 
    <body> 
    <script src="https://unpkg.com/vue"></script> 

    <div id= "root"> 
     {{message}} 
     <div class = "col-md-3"></div> 
     <div class = "col-md-6"> 
     <question-container :question = 'details' ><question-container> 
     </div> 
     <div class ="col-md-3"></div> 
      <!-- <mcq-behaviour :data = "details[0]"></mcq-behaviour> --> 
    </div> 
    <script src='main.js'></script> 
    </body> 

</html>

親コンポーネント

Vue.component('questionContainer',{ 
    props:['question'], 
    template : ` <div><div v-on:nextQuestion = "updateQuestion()">{{question}}<mcq-behaviour :data = "question[x]"></mcq-behaviour></div></div>`, 
    data : function() { 
    return {x :0} 
    }, 
    methods: { 
    updateQuestion : function(){ 
     alert("Hi"); 
    } 
    } 
})

子コンポーネント

Vue.component('mcqBehaviour', { 
    props: ['data'], 
    template: ` 
    <div class= "mngMrgin"> 
     <div class="panel panel-primary" > 
     <div class="panel-heading">Question</div> 
     <div class="panel-body">{{data.question}}</div> 
     </div> 
     <div v-for = "(opt,i) in data.options"> 
     <div class="well well-sm" >{{opt.text}}</div> 
     </div> 
     <div class ="row">  
     <div class="col-md-4"><button type="button" class="btn btn-primary btn-md" v-on:click = "previousQuestion()">Previous</button></div> 
     <div class="col-md-4"><button type="button" class="btn btn-primary btn-md" v-on:click = "checkAnswer()">Check Answer</button></div> 
     <div class="col-md-4"><button type="button" class="btn btn-primary btn-md" v-on:click = "nextPress()">NEXT</button></div> 
     </div> 
     <hr> 
    </div> 
    </div> 
    </div> 
    `, 
    methods : { 
    nextPress : function(){ 
     this.$emit('nextQuestion');  
    } 
    } 
})

のApp

var app= new Vue({ 
    el : '#root', 
    data: { 
    message: "Hello from Vue", 
    details : [ 
     { 
     "_id": "5927f07c3c1501cd533519d6", 
     "options": [ 
      {'text' : 'answer1',id : 1}, 
      {'text' : 'answer2' ,id : 2 }, 
      {'text' : 'answer3',id : 3}, 
      {'text' : 'answer4' ,id : 4}, 
     ], 
     "question": "Hello, undefined! You have 2 unread messages.", 
     "correctAnsid" : 1 
     },{ 
     "_id": "5927f07c3c1501cd53351956", 
     "options": [ 
      {'text' : 'answer1',id : 1}, 
      {'text' : 'answer2' ,id : 2 }, 
      {'text' : 'answer3',id : 3}, 
      {'text' : 'answer4' ,id : 4}, 
     ], 
     "question": "Hello, undefined! You have 3 unread messages.", 
     "correctAnsid" : 4 
     } 
    ] 
    } 
}

親コンポーネントは子コンポーネントから放出されるカスタムイベントUpdateQuestionを聞いていません。

出典

2017-06-26 Devarshi Roy

ラクダのケースイベントを避けるようにしてください。試してみてください。

this.$emit('next-question')

また、コンポーネントを含む要素ではなく、コンポーネント自体にリスナーを追加する必要があります。

<div>{{question}} 
    <mcq-behaviour v-on:next-question = "updateQuestion()" :data = "question[x]"></mcq-behaviour> 
</div>

出典

2017-06-26 05:51:06 Bert

ありがとうございました。それは私の問題を解決しました。でも、ラクダの事件を避けるべき理由は何ですか？ –

@DevarshiRoy HTML（ 'v-on：some-event'）の属性は大文字と小文字を区別しないため、ラクダの事例は避けるべきです。 Vueはコンソールに「HTML属性は大文字と小文字を区別しないので、DOM内のテンプレートを使用するときにv-onを使用してcamelCaseイベントを聴くことはできないことに注意してください。 "" – Bert

@DevarshiRoyまた、これはあなたの最初の質問ですので、答えが役に立つなら、あなたの問題を解決し、あなたは/ upvoteを受け入れる必要があります。 – Bert

答えて

関連する問題