将vue组件绑定到类名

时间:2018-04-05 08:03:53

标签: vue.js

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

});

2 个答案:

答案 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");
        }
    }

});