附加的html中的vue onclick函数不起作用
Posted
技术标签:
【中文标题】附加的html中的vue onclick函数不起作用【英文标题】:vue onclick function inside appended html not working 【发布时间】:2018-06-06 10:18:13 【问题描述】:我在使用 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 但没有运气,该功能永远无法到达并且点击事件不起作用。
我做错了什么?有什么建议吗?
谢谢!
【问题讨论】:
简而言之,您是在 Vue 实例注册自身之后向页面添加内容,因此新添加的道具不是反应性的。我确定这已经在某个地方得到了回答,所以我会四处寻找。 忘了说 addQuestion 函数在 export default methods: addQuestion() // 上面的代码 出于兴趣,你为什么要这样混合Vue和JQuery?这可以用纯 vue 完成,这意味着一切都会正确链接.. 你有一个只使用vue的正确方法的例子吗?我还没有在 vue 中找到类似 append 的东西,所以我混合了,但我很确定这不是最好的方法...... 我会记下一个答案,其中包含一些关于可以更改以使其正常工作的要点。 【参考方案1】:我会避免你正在学习的课程,而是使用组件。
您可以创建一个包含您当前分配给newQuestion
的HTML 的组件,而不是将HTML 附加到一个div。然后,该组件将负责处理 addQuestion
和 removeQuestion
方法,因为它是在 Vue 中注册的组件,所以它会自动响应。
注册组件后,您可以通过执行以下操作来控制它是否显示:
<new-question v-if="showNewQuestion"></new-question>
然后在您的 addQuestion
方法中,您只需设置 this.showNewQuestion = true
以便组件显示。 showNewQuestion
显然需要在您的 data
属性中声明并默认为 false。
我没有详细介绍组件的形成,因为我不知道您是否使用vue-loader
,但可以在Vue Docs Site上找到更多信息。
【讨论】:
好的..谢谢!我现在为 newQuestion 部分和 Vue.extend 使用一个组件来加载它。然后我使用 vm.$mount 将它渲染成一个 div。以上是关于附加的html中的vue onclick函数不起作用的主要内容,如果未能解决你的问题,请参考以下文章
Ajax加载后按钮上的JQuery HTML onclick属性不起作用
Vue Composition Api 渲染功能同步发射不起作用