Vue jsイベントが取得されていない

Question

私はvue jsを試し始めました。私はまた、プロジェクトのためにSymfony 31を使用しています。チェックアウト/サインアップページには、注文アイテムを表すフォームの埋め込みコレクションがあります（それぞれがあるタイプの製品に対するサブスクリプションです）。複数の項目を選択するには、チェックボックスをオンにします。数量を変更することもできます。残念ながら、数量更新をVueインスタンスに渡すことはできません。エントリはレンダリングで数量1で登録されます。数量を変更してアイテムを選択すると、価格は正しく計算されますが、アプリケーションはこれを新しいエンティティとして登録します。数量とのバインディングは機能していません。私はまた、周波数と呼ばれる同様のフィールドを追加する必要がありますと私は同じ問題があることを知っています。助けて？ここで

は、JSのフィドルです：https://jsfiddle.net/wavsu8xm/

Javascriptを：

var bus = new Vue(); 

var entriesComponent = Vue.component('entries', { 
    template: '#entries', 
    props: { 
    entries: [Array, Object], 
    selected: Array, 
    addons: Array, 
    frequencies: [Array, Object], 
    }, 
    watch: { 
    selected: function(val, oldVal) { 
     bus.$emit('selected-changed', val); 
    }, 
    } 
}); 

new Vue({ 
    el: '#app', 
    data: { 
    entries: [], 
    selected: [], 
    addons: [], 
    frequencies: [], 
    paymentConfig: { 
     advance: 25, 
     firstweek: 25, 
     ondelivery: 50, 
    }, 
    weeks: 12, 
    }, 
    components: { 
    'entriesComponent': entriesComponent, 
    }, 
    created: function() { 
    // store this to use with Vue.set 
    var temp = this; 
    bus.$on('selected-changed', function(selected) { 
     // vm.$set deprecated 
     Vue.set(temp, 'selected', selected); 
    }); 
    }, 
    computed: { 
    totalAdvance: function() { 
     return (this.paymentConfig.advance * this.total)/100; 
    }, 
    totalFirstWeek: { 
     get: function() { 
     return (this.paymentConfig.firstweek * this.total)/100; 
     }, 
    }, 
    onDeliveryPayment: { 
     get: function() { 
     return (this.paymentConfig.ondelivery * this.total)/(this.weeks * 100); 
     } 
    }, 
    total: { 
     get: function() { 
     var sum = 0; 
     var weeks = this.weeks; 
     this.selected.forEach(function(item) { 
      sum += weeks * item.itemPrice * item.quantity; 
     }); 
     console.log(sum); 
     return sum; 
     } 
    } 
    } 
}); 

テンプレート：

<section class="content"> 
    <div class="row" id="app"> 
    <div class="col-md-8"> 
     <div class="box box-primary"> 
     <div class="box-body"> 
      <div class="row"> 
      <div class="col-md-12"> 
       <div class="form-group"> 
       <label class="control-label required">Items</label> 
       <div class="col-md-12"> 
        <entries :entries="{ 0 : { shareSize : 'Small', quantity : '1', itemPrice : '24', frequency : '' }, 1 : { shareSize : 'Medium', quantity : '1', itemPrice : '35', frequency : '' }, 2 : { shareSize : 'Large', quantity : '1', itemPrice : '46', frequency : '' } }" 
        :selected="selected"></entries> 
        <!-- component template --> 
        <template id="entries"> 
        <div class="col-md-12"> 
         <div class="form-group" v-for="(entry, key) in entries" v-bind:entry="entry"> 
         <div class="form-group col-md-12"> 
          <div class="col-md-12"> 
          <div class="col-md-4"> 
           <input type="checkbox" v-bind:value="entry" v-model="selected"> 
          </div> 
          <div class="col-md-4">{{entry.shareSize}}</div> 
          <div class="col-md-4">{{'$ ' + Number(entry.itemPrice).toFixed(2) }}</div> 
          </div> 
          <div class="form-group col-md-12"> 
          <div class="col-md-6"> 
           <input type="number" v-model="entry.quantity" :value="entry.quantity" /> 
          </div> 
          </div> 

         </div> 
         </div> 
        </div> 
        </template> 
       </div> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
     <div class="col-md-4"> 
     <div class="box box-info"> 
      <div class="box-body" style="padding:15px;"> 
      <div class="container-fluid"> 
       <div class="form-group"> 
       <div class="control-label"> 
        <label>Summary</label> 
       </div> 
       <div class="form-control" v-for="item in selected"> 
        <span class="pull-left small-box-footer">{{ item.shareSize }}</span> 
        <span class="pull-right">{{ item.quantity + ' x $ ' + (item.itemPrice*item.quantity).toFixed(2)}}</span> 
       </div> 
       <div class="control-label"> 
        <label>Payment plan</label> 
       </div> 
       <div class="col-md-12"> 
        {{ '$ ' + totalAdvance.toFixed(2) }} - advance 
       </div> 
       <div class="col-md-12"> 
        {{ '$ ' + totalFirstWeek.toFixed(2) }} - first week 
       </div> 
       <div class="col-md-12"> 
        {{ '$ ' + onDeliveryPayment.toFixed(2) }}/ week on each of the {{ weeks }} weeks of the subscription 
       </div> 
       <div class="col-md-12 row"> 
        <div class="control-label"><strong><span class="pull-left">Total</span><span class="pull-right">{{ '$ ' + total.toFixed(2) }}</span></strong></div> 
       </div> 
       <div class="col-md-12 row"> 
        <div class="title"><strong><span class="pull-left">Total due now</span><span class="pull-right">{{ '$ ' + totalAdvance.toFixed(2) }}</span></strong></div> 
       </div> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</section> 

Answer 1

あなたは親コンポーネントの再描画時に上書きされる直接あなたの小道具を変異されていますコンポーネント内に作成したコピーを作成する必要があります。これは、作成したコンポーネントのメソッド内で実行できます。

created: function() { 
    // copy props to data 
    this.entriesCopy = this.entries; 
    this.selectedCopy = this.selected; 
    }, 
    data: function() { 
    return{ 
    entriesCopy: [], 
    selectedCopy: [] 
    } 
    } 

今、あなたは自分のウォッチャーを更新する必要があります。

watch: { 
    selectedCopy: function(val, oldVal) { 
     bus.$emit('selected-changed', val); 
    } 
    } 

そして、あなたのテンプレート：

//... 
div class="form-group" v-for="(entry, key) in entriesCopy" v-bind:entry="entry"> 
//... 
<input type="checkbox" v-bind:value="entry" v-model="selectedCopy"> 

変更を反映します。 https://jsfiddle.net/5pyw74h9/