vue onclick Funktion innerhalb angehängter html funktioniert nicht

Question

Ich habe ein Problem mit @click vue Funktion in einem angehängten HTML-Element mit einer Vue-Komponente.

Die Komponente haben zwei Knopf divs hinzufügen und entfernen innerhalb eines Behälters, wie folgt:

<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 Funktion ist wie folgt:

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); } 

Der neue Behälter erfolgreich angehängt wird, aber die beiden Schaltflächen für Antwort hinzufügen und Antwort entfernen, Aufruf von @ click.native = "addAnswer()" und @ click.native = "removeAnswer()" funktionieren nicht. Ich habe es mit oder ohne native und alles andere versucht, auch mit js onClick aber kein Glück, die Funktion wird nie erreicht und das click Event funktioniert nicht.

Was mache ich falsch? Irgendwelche Vorschläge?

Danke!

Answer 1

Ich würde den Kurs vermeiden, den Sie nehmen und stattdessen Komponenten verwenden.

Anstatt HTML an ein div anzuhängen, könnten Sie eine Komponente erstellen, die den HTML-Code enthält, den Sie newQuestion zuweisen. Diese Komponente wäre dann für den Umgang mit den Methoden addQuestion und removeQuestion verantwortlich. Da es sich um eine bei Vue registrierte Komponente handelt, ist sie automatisch reaktiv.

Sobald die Komponente, die Sie steuern können, registriert ist, ob es sich um etwas zu tun, wie gezeigt ist:

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

Dann in Ihrem addQuestion Methode, die Sie gerade this.showNewQuestion = true so eingestellt, dass die Komponente zeigen. showNewQuestion müsste natürlich innerhalb Ihrer data prop und default auf false deklariert werden.

Ich bin nicht sehr ins Detail über die Bildung der Komponente gegangen, wie ich nicht weiß, ob Ihre Verwendung vue-loader oder nicht, aber mehr Informationen können auf der Vue Docs Site gefunden werden.