好吧,所以我试图将这个 vue 组件绑定(bind)到一个类名,以便它在每个具有此类的元素上触发,但发生的是它只适用于第一个元素,而不适用于其他元素
<div class="__comment_post">
<textarea></textarea>
<input type="submit" v-on:click="submitComment" /> <!-- submit comment being only triggered on this one -->
</div>
<div class="__comment_post">
<textarea></textarea>
<input type="submit" v-on:click="submitComment" />
</div>
<div class="__comment_post">
<textarea></textarea>
<input type="submit" v-on:click="submitComment" />
</div>
正如您在上面看到的,我有 3 个 __comment_post 类的 div,因此 submitComment 自然应该绑定(bind)到所有这 3 个 div,但发生的是 submitComment 仅在第一个上被触发
var app = new Vue({
el:".__comment_post",
data: {
comment: ""
},
methods: {
submitComment: function() {
console.log("Test");
}
}
});
最佳答案
这是您和其他人可以遵循的一个小示例,以便将 vue 实例绑定(bind)到类名。
比方说,你想将 Vue 绑定(bind)到多个现有的 <div class="comment">
HTML 中的元素。
HTML:
<div class="comment" data-id="1">
<div>
<div class="comment" data-id="2">
<div>
现在,您可以在您的示例中尝试以下逻辑/代码。
JS:
var comments = {
"1": {"content": "Comment 1"},
"2": {"content": "Comment 2"}
}
$('.comment').each(function () {
var $el = $(this)
var id = $el.attr('data-id')
var data = comments[id]
new Vue({
el: this,
data: data,
template: '<div class="comment">{{ content }}<div>'
})
})
我希望这会回答你的问题:)
关于vue.js - 将vue组件绑定(bind)到类名,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49667161/