好吧所以我试图将这个vue组件绑定到一个类名,这样它就会触发每个具有这个类的元素,但会发生的是它只适用于第一个元素而不适用于其他元素
<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个div与类__comment_post,所以自然submitComment应该绑定到所有这3个div,但会发生的是,submitComment只在第一个触发
var app = new Vue({
el:".__comment_post",
data: {
comment: ""
},
methods: {
submitComment: function() {
console.log("Test");
}
}
});
答案 0 :(得分:1)
以下是您和其他人可以遵循的一个小例子,以便将vue实例绑定到类名
可以说,您希望将Vue绑定到HTML中的多个现有<div class="comment">
元素。
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>'
})
})
我希望这会回答你的问题:)
答案 1 :(得分:1)
vue实例安装在第一个找到的DOM元素上,css选择器传递给el
选项。所以剩下的两个div
没有安装vue实例。
所以使用包装器div
包装你的div并在该包装器上挂载vue实例
<div id="app">
<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>
<强>脚本强>
var app = new Vue({
el:"#app",
data: {
comment: ""
},
methods: {
submitComment: function() {
console.log("Test");
}
}
});