4
回答
Vue 使用类选择器的问题,只有第一个匹配的元素生效
终于搞明白,存储TCO原来是这样算的>>>   

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>测试</title>
    <script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js" charset="utf-8"></script>
    <script src="http://cdn.staticfile.org/vue/2.0.3/vue.min.js"></script>
</head>

<body>
    <!-- 这一个能显示 Hello World -->
    <div class="form-data">
        Foo: {{message}}
    </div>

    <!-- 这一个不能显示 Hello World,显示的是 {{message}} -->
    <div class="form-data">
        Bar: {{message}}
    </div>

    <script>
    var app = new Vue({
        el: '.form-data', // 使用 class 选择器,只会作用在第一个匹配的 element
        data: {
            message: 'Hello World!'
        }
    });
    </script>
</body>

</html>








<无标签>
举报
公孙二狗
发帖于12个月前 4回/1K+阅

大概这个样子

$('.form-data').each(function(index, element) {
    var $self = $(element);
    var new_id = 'form-data-' + index;
    $self.attr('id', new_id)
    
    new Vue({
        el: "#" + new_id,
        data: function() {
            return {
                message: 'Hello World!'
            }
        }
    })
  });

广告:

Phoenix是基于Elixir语言的Web开发框架,Ruby的语法、Rails的便利、Erlang的稳定和高性能、天然支持websocket。 
官方网站:http://www.phoenixframework.org/
 社区: https://www.phoenix-china.org 
 社区源码: https://github.com/nanlong/phoenix-china

--- 共有 1 条评论 ---
公孙二狗这样做得不偿失,对 data 的管理也失控了,也就失去了使用 vue 的优势 12个月前 回复

el只匹配第一个, 不要认为它是jq选择器.

解决方法可以是1, 把俩formdata包在一个容器里然后把这个容器作为el; 2, 像"--沙--世界"那样做, 不过改一下在外面定义一个data object统一传给vue初始化方法共享data.

var data = { message: 'Hello World!' }
$('.form-data').each(function() {
    new Vue({
        el: this,
        data: data
    })
  });



顶部