vue.js - 将vue组件绑定(bind)到类名

Question

好吧，所以我试图将这个 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");
        }
    }

});

Answer 1

这是您和其他人可以遵循的一个小示例，以便将 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>'
  })
})

我希望这会回答你的问题:)