javascript - 如何修改vue.js的这个demo？

Question

演示:
https://jsfiddle.net/8hh0p0ej/

在这个demo中，items中有一个selected属性，它控制item是否被选中以及“allSelected”。

问题:

当我在项目中使用它时，items的内容将从mysql中获取，没有selected字段，不需要某个项目的状态被记录，所以我不想添加这个字段，在这种情况下如何实现“全选”？

Answer 1

您可以在获取数据后将selected成员添加到数据中。

var vm = new Vue({
  el: "#app",
  data: {
    items: []
  },
  methods: {
    fillIn: function(index, n) {
      this.items[index].num = n;
    }
  },
  computed: {
    nums: function() {
      return [1, 2, 3, 4, 5];
    },
    allSelected: {
      get: function() {
        for (var i = 0, length = this.items.length; i < length; i++) {
          if (this.items[i].selected === false) {
            return false;
          }
        }
        return true;
      },
      set: function(val) {
        for (var i = 0, length = this.items.length; i < length; i++) {
          this.items[i].selected = val;
        }
      }
    },
    sum: function() {
      var totalAmount = 0;
      for (var i = 0, length = this.items.length; i < length; i++) {
        var item = this.items[i];
        if (item.selected === true) {
          totalAmount += item.price * item.num;
        }
      }
      return totalAmount;
    }
  }
});

// Data as it might come from mysql
mysqlData = [{
  message: 'Apple',
  num: 1,
  price: 5
}, {
  message: 'Peach',
  num: 1,
  price: 10
}, {
  message: 'Orange',
  num: 1,
  price: 15
}, {
  message: 'Pear',
  num: 1,
  price: 20
}];

// Modify the data when we put it in the vm
vm.$set('items', mysqlData.map((item) => {
  item.selected = false;
  return item;
}));

<link href="//cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/css/tether.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="//cdn.bootcss.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/vue/1.0.26/vue.min.js"></script>
<div class="container">
  <div class="card">
    <h3 class="card-header">Cart</h3>
    <div class="card-block">
      <div id="app">
        <div class="row">
          <div class="col-xs-3">
            <label class="c-input c-checkbox">
              <input type="checkbox" v-model="allSelected">Select All
              <span class="c-indicator"></span>
            </label>
          </div>
          <div class="col-xs-2">
            Goods
          </div>
          <div class="col-xs-5">
            Number
          </div>
          <div class="col-xs-2">
            Money
          </div>
        </div>
        <form>
          <div class="row" v-for="(index, item) in items">
            <div class="col-xs-3">
              <label class="c-input c-checkbox">
                <input type="checkbox" v-model="item.selected">
                <span class="c-indicator"></span>
              </label>
            </div>
            <div class="col-xs-2">
              {{ item.message }}
            </div>
            <div class="col-xs-5">
              <div class="dropdown">
                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-text="item.num">
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                  <li v-for="n in nums">
                    <a class="dropdown-item" @click="fillIn(index, n)">{{n}}个</a>
                  </li>
                </ul>
              </div>
            </div>
            <div class="col-xs-2">
              {{ item.price * item.num }}
            </div>
          </div>

          <div class="row">
            <div class="col-xs-3">
              Sum
            </div>
            <div class="col-xs-2">

            </div>
            <div class="col-xs-5">

            </div>
            <div class="col-xs-2">
              {{ sum }}
            </div>
          </div>
          <button type="submit" class="btn btn-primary" :disabled="sum === 0">Submit</button>
        </form>
      </div>
    </div>
  </div>
</div>