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

新容器已成功附加，但添加应答和删除应答的两个按钮，调用@ click.native =“addAnswer（）”和@ click.native =“removeAnswer（）”无效。我曾尝试使用或不使用本机和其他任何东西，也使用js onClick但没有运气，函数永远不会到达，点击事件也无法正常工作。

我做错了什么？有什么建议吗？

谢谢！

Answer 1

我会避免你正在采取的课程，而是使用组件。

您可以创建一个包含您当前正在分配给newQuestion的HTML的组件，而不是将HTML附加到div。那么该组件将负责处理addQuestion和removeQuestion方法，并且因为它是在Vue注册的组件，它会自动被激活。

注册组件后，您可以通过执行以下操作来控制是否显示该组件：

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

然后在addQuestion方法中，您只需设置this.showNewQuestion = true，即可显示该组件。 showNewQuestion显然需要在data道具中声明并默认为假。

我还没有详细介绍组件的构成，因为我不知道您是否可以使用vue-loader或更多信息在Vue Docs Site上找到

附加的html中的vue onclick函数无效

1 个答案: