vue onclick関数の内部で追加されたhtmlが動作しない

Question

Vueコンポーネントを使用して、追加されたHTML要素内で@click関数を使用する際に問題が発生します。

成分は以下のように、容器の内部divを追加および削除するには、2つのボタンを持っている：

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

新しいコンテナが正常に追加されるが、2つの「AddAnswer =」と@ click.native = "removeAnswer（）"が動作していません。私はネイティブと一緒に、または何もしないで、js onClickと一緒に試しましたが、運はありません。機能は決して到達せず、動作していないクリックイベントです。

私は間違っていますか？助言がありますか？

ありがとうございます！

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で確認できました。