vue onclick 함수가 추가 html이 작동하지 않습니다.

Question

Vue 구성 요소를 사용하여 추가 된 HTML 요소에서 @click vue 함수를 사용하는 데 문제가 있습니다.

구성 요소는 다음과 같이 컨테이너 내부에있는 div를 추가하고 제거하는 두 개의 버튼이 있습니다

<div class="col-md-12"> 
    <button class="btn btn-sm btn-warning" @click.prevent.stop="addQuestion()">Add Question</button> 
    <button class="btn btn-sm btn-danger" @click.prevent.stop="removeQuestion()" v-if="notRemovableQuestion">Remove Question</button> 
    </div> 

addQuestion 기능은 다음과 같다 :

addQuestion(){ 
    var newQuestion = '<div class="questionBox col-md-12 f-left p-2 mt-2" style="border:2px solid blue;">' + 
         '<div class="col-md-11 f-left">' + 
         '<input type="text" class="form-control" name="domanda" placeholder="Question" v-model="domanda" />' + 
         '<input type="text" class="form-control" name="question_description" placeholder="Question Description" v-model="question_description" />' + 
         '<div class="form-check">' + 
          '<div class="newAnswerActions f-left full-width col-md-12 mb-2 mt-2">' + 
          '<a class="btn btn-sm btn-warning" @click.native="addAnswer()">Add Answer</a>' + 
          '<a class="btn btn-sm btn-danger" @click.native="removeAnswer()" v-if="notRemovableAnswer">Remove Answer</a>' + 
          '</div>' + 
          '<label class="form-check-label">' + 
          '<input class="form-check-input" type="radio" name="risposte" id="exampleRadios1" value="">' + 
          '<input type="text" class="form-control" name="answer" placeholder="Risposta" />' + 
          '</label>' + 
         '</div>' + 
         '</div>' + 
         '<div class="col-md-1 f-left">' + 
         '<button class="btn btn-sm btn-success" @click.prevent.stop="removeQuestion()">SAVE</button>' + 
         '</div>' + 
        '</div>'; 

    $(".allQuestionContainer").append(newQuestion); } 

새로운 용기가 성공적으로 추가되지만이 @ add.native = "addAnswer()"및 @ click.native = "removeAnswer()"가 작동하지 않습니다. 나는 js onClick과 함께 네이티브와 그 밖의 다른 것을 시도해 보았습니다. 그러나 운이 없다면, 함수는 결코 도달하지 않고 click 이벤트가 작동하지 않습니다.

내가 뭘 잘못하고있어? 어떤 제안?

감사합니다.

Answer 1

나는 당신이 복용하고있는 코스를 피하고 대신 구성 요소를 사용합니다.

div에 HTML을 추가하는 대신 현재 newQuestion에 할당 한 HTML이 포함 된 구성 요소를 만들 수 있습니다. 그런 다음 해당 구성 요소는 addQuestion 및 removeQuestion 메서드를 처리 할 책임이 있으며 Vue에 등록 된 구성 요소이기 때문에 자동으로 응답 할 것입니다. 당신은 단지 구성 요소가 표시됩니다 너무 this.showNewQuestion = true을 설정하여 addQuestion 메서드 내에서 다음

<new-question v-if="showNewQuestion"></new-question> 

: 구성 요소는이 같은 작업을 수행하여 표시 여부를 제어 할 수 있습니다 등록되면

. showNewQuestion은 분명히 data 소품에서 신고해야하며 기본값은 false입니다.

vue-loader을 사용했는지 알 수는 없지만 더 많은 정보를 Vue Docs Site에서 찾을 수 있는지 여부는 알 수 없으므로 구성 요소 구성에 대해 자세히 설명하지 않았습니다.