Eigenschaftsbindung und Synchronisierung in vue.js

Ich habe Probleme beim Synchronisieren meiner Eigenschaften in vue.js, ich habe eine 'aktive' Eigenschaft, die ich auf den Wert jeder Instanz 'Plan' setzen möchte, aber gleichzeitig Zeit möchte ich die Eigenschaft mit dem Elternteil synchronisieren, ohne Glück. Was mache ich falsch ?Eigenschaftsbindung und Synchronisierung in 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>

Quelle

2016-12-05 w007

Sie verwenden Version 2 von Vue. Die Modifikatoren .sync und .once wurden entfernt. Von der docs:

Requisiten sind jetzt immer in eine Richtung nach unten. Um Nebenwirkungen im übergeordneten Bereich zu erzeugen, muss eine Komponente explizit ein Ereignis ausgeben, anstatt sich auf die implizite Bindung zu verlassen.

Ich habe Ihren Code geändert Ereignisse verwenden hier:

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>

Quelle

2016-12-05 21:04:27 asemahle

dies nicht mehr wahr ist, wie es in [2.3.0+] (https wieder eingeführt wurde: // vuejs .org/v2/guide/components.html # sync-Modifikator) – icosamuel

Eigenschaftsbindung und Synchronisierung in vue.js

Antwort

Verwandte Themen