vue.js中的属性绑定和同步

我在vue.js中同步我的属性时遇到了问题，我有一个'active'属性，我想将它设置为每个实例'plan'的值，但在相同我希望将时间与家长同步，但没有运气。我究竟做错了什么？vue.js中的属性绑定和同步

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Vue</title> 
    <link rel="stylesheet prefetch" href="http://bootswatch.com/paper/bootstrap.min.css"> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script> 
</head> 
<body> 
    <div class="container"> 
     <div id="app"> 
     <pre> 
      @{{ $data | json}} 
     </pre> 
     <div v-for="plan in plans"> 
      <plan :active.sync="active" :plan.sync="plan"></plan> 
     </div> 
     </div> 
    </div> 

    <template id="plan_template"> 
     <div> 
     <span >@{{ plan.name }}</span> 
     <span >@{{ plan.price }}/month</span> 
     <button @click="setActivePlan" class="btn btn-primary btn-xs">UPGRADE</button> 
     </div> 
    </template> 

    <script> 
    new Vue({ 
     el:'#app', 
     data:{ 
     plans:[ 
      {name:'Executive',price:100}, 
      {name:'Professional',price:50}, 
      {name:'Personal',price:30}, 
      {name:'Free',price:0} 
     ], 
     active:{}, 

     }, 

     components:{ 
     plan:{ 
      template:'#plan_template', 

      props:['plan', 'active'], 

      methods:{ 
      setActivePlan:function(){ 
       this.active=this.plan; 
      } 
      } 
     } 
     } 
    }); 
    </script> 
</body> 
</html>

来源

2016-12-05 w007

您正在使用Vue的第2版。 .sync和.once修饰符已被删除。从docs：

道具现在总是单向下降。为了在父范围中产生副作用，组件需要显式地发出事件，而不是依赖于隐式绑定。

我已经修改了你的代码在这里使用的事件：

new Vue({ 
 
    el:'#app', 
 
    data:{ 
 
    plans:[ 
 
     {name:'Executive',price:100}, 
 
     {name:'Professional',price:50}, 
 
     {name:'Personal',price:30}, 
 
     {name:'Free',price:0} 
 
    ], 
 
    active:{}, 
 
    }, 
 
    methods: { 
 
    setActivePlan: function(plan) { 
 
     this.active = plan; 
 
    } 
 
    }, 
 

 
    components:{ 
 
    plan:{ 
 
     template:'#plan_template', 
 

 
     props:['plan', 'active'], 
 

 
     methods:{ 
 
     setActivePlan:function(){ 
 
      // emit an event to the parent indicating that this is the active plan 
 
      this.$emit('activate-plan'); 
 
     } 
 
     } 
 
    } 
 
    } 
 
});

<link rel="stylesheet prefetch" href="http://bootswatch.com/paper/bootstrap.min.css"> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script> 
 

 
<div class="container"> 
 
    <div id="app"> 
 
    <div v-for="plan in plans"> 
 
     <plan :plan="plan" 
 
      :active="active" 
 
      @activate-plan="setActivePlan(plan)" 
 
      > 
 
     </plan> 
 
    </div> 
 
    <pre> 
 
     {{ JSON.stringify($data, null, 2) }} 
 
    </pre> 
 
    </div> 
 
</div> 
 

 
<template id="plan_template"> 
 
    <div> 
 
    <span >{{ plan.name }}</span> 
 
    <span >{{ plan.price }}/month</span> 
 
    <button @click="setActivePlan" class="btn btn-primary btn-xs">UPGRADE</button> 
 
    </div> 
 
</template>

来源

2016-12-05 21:04:27 asemahle

这样下去是不正确的，因为它是在[2.3.0+（HTTPS重新：// vuejs .ORG/V2 /引导/ components.html＃同步改性剂）的 – icosamuel

vue.js中的属性绑定和同步

回答

相关问题