Vue.js 未拾取Vue js事件

我刚刚开始尝试vue js，我正在用它构建一个签出表单。我还在项目中使用

Symfony 31

。在结帐/注册页面上，我有一个嵌入式表单集合，这些表单表示订单项（每个表单都是对一种产品的订阅）。勾选复选框可以选择多个项目。您也可以更改数量。很遗憾，我无法将数量更新传递到

Vue

实例。条目在呈现时以数量1注册，如果我更改数量然后选择项目，则价格计算正确，但应用程序将其注册为新实体。与数量的绑定不起作用。我还需要添加一个类似的字段，名为frequency，我知道我也会遇到同样的问题。帮忙

以下是js小提琴：

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>

项目
{{entry.shareSize}
{{$'+Number（entry.itemPrice.toFixed（2）}
总结
{{item.shareSize}
{{item.quantity+'x$'+（item.itemPrice*item.quantity）.toFixed（2）}
付款计划
{{'$'+totalAdvance.toFixed（2）}-advance
{{'$'+totalFirstWeek.toFixed（2）}-第一周
在订阅的{{weeks}周的每个{{{weeks}}周上{{{'$'+onDeliveryPayment.toFixed（2）}}/周
Total{{'$'+Total.toFixed（2）}
现在到期的总额{{{'$'+totalAdvance.toFixed（2）}

您正在直接修改道具，当父组件重新渲染时，道具将被覆盖，因此您需要在组件内复制道具，这可以在组件的创建方法内完成：

  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">

/。。。
div class=“form group”v-for=“（条目，键）在entriesCopy“v-bind:entry=“entry”>
//...

以反映变化

---

以下是更新后的JSFIDLE:

您正在直接修改道具，当父组件重新呈现时，道具将被覆盖，因此您需要在组件内复制它们，这可以在组件的创建方法内完成：

  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">

/。。。
div class=“form group”v-for=“（条目，键）在entriesCopy“v-bind:entry=“entry”>
//...

以反映变化

---

以下是更新的JSFIDLE:

非常感谢！现在可以了！次要更新：data（）{应为写入数据：function（）{是的，很抱歉，我使用的是

Ecmascript 6

语法，需要通过类似的方式进行编译，以便在浏览器中使用。我将更新答案并使用

Ecmascript 5

。我还有一个问题。我应该在这里添加它还是创建一个新的语法？假设我想添加两个类型的元素（相同的组件）到页面，但我希望它们都写入相同的选定数组。（主视图中选定的属性应该是两个元素的并集）@anegrea您可以在一个新问题中发布这一点，因为在这里很难回答：：）非常感谢！非常感谢！现在可以了！小更新：data（）{应该是书面数据：function（）{是的，很抱歉我使用的是

Ecmascript 6

语法，它需要通过类似的方式进行编译，以便在浏览器中使用。我将更新答案并使用

Ecmascript 5

。我还有一个问题。我应该在这里添加它还是创建一个新的语法？假设我想添加两个类型的元素（相同的组件）到页面，但我希望它们都写入相同的选定数组。（主视图中选定的属性应该是两个元素的并集）@anegrea您可以在一个新问题中发布这一点，因为在这里很难回答：）非常感谢！