Question

有没有一种方法可以使这段代码更短/更可扩展：（只需在此处添加很多代码来演示我必须为每个项目编写的数量）

    hoodiesml: false,
    hoodiemed: false,
    hoodielrg: false,
    hoodiexlrg: false,
    hoodiexxlrg: false,

    hoodiesmlqty: 0,
    hoodiemedqty: 0,
    hoodielrgqty: 0,
    hoodiexlrgqty: 0,
    hoodiexxlrgqty: 0,

    hoodiesmltot: 0,
    hoodiemedtot: 0,
    hoodielrgtot: 0,
    hoodiexlrgtot: 0,
    hoodiexxlrgtot: 0,

    shirtsml: false,
    shirtmed: false,
    shirtlrg: false,
    shirtxlrg: false,
    shirtxxlrg: false,

    shirtsmlqty: 0,
    shirtmedqty: 0,
    shirtlrgqty: 0,
    shirtxlrgqty: 0,
    shirtxxlrgqty: 0,

    shirtsmltot: 0,
    shirtmedtot: 0,
    shirtlrgtot: 0,
    shirtxlrgtot: 0,
    shirtxxlrgtot: 0,

    hatsml: false,
    hatmed: false,
    hatlrg: false,
    hatxlrg: false,
    hatxxlrg: false,

    hatsmlqty: 0,
    hatmedqty: 0,
    hatlrgqty: 0,
    hatxlrgqty: 0,
    hatxxlrgqty: 0,

    hatsmltot: 0,
    hatmedtot: 0,
    hatlrgtot: 0,
    hatxlrgtot: 0,
    hatxxlrgtot: 0,
}
},
watch: {

hoodiesml() {
    let app = this
    if (app.hoodiesml === false) {
        app.hoodiesmlqty = 0
        console.log('hoodiesml qty set to 0')
    }

    else if (app.hoodiesml === true) {
        app.hoodiesmlqty = 1
    }
},

hoodiesmlqty() {
    let app = this
    let tot = 0
    tot = app.hoodiesmlqty * app.hoodieCost
    app.hoodiesmltot = tot
    console.log('some hoodiesmlqty changed ' + tot)
    app.merchtotal()
},


hatsml() {
    let app = this
    if (app.hatsml === false) {
        app.hatsmlqty = 0
        console.log('hatsml qty set to 0')
    }

    else if (app.hatsml === true) {
        app.hatsmlqty = 1
    }
},

hatsmlqty() {
    let app = this
    let tot = 0
    tot = app.hatsmlqty * app.hatCost
    app.hatsmltot = tot
    console.log('some hatsmlqty changed ' + tot)
    app.merchtotal()
},

shirtsml() {
    let app = this
    if (app.shirtsml === false) {
        app.shirtsmlqty = 0
        console.log('shirtsml qty set to 0')
    }

    else if (app.shirtsml === true) {
        app.shirtsmlqty = 1
    }
},

shirtsmlqty() {
    let app = this
    let tot = 0
    tot = app.shirtsmlqty * app.shirtCost
    app.shirtsmltot = tot
    console.log('some shirtsmlqty changed ' + tot)
    app.merchtotal()
},

这仅显示每个尺寸5个中的2个尺寸的观察者。也可能有3个以上的项目。

我正在使用Django，我曾考虑将其全部留在数据库端，但是我从此页面处理付款。

过程是我将全部款项直接从此页面交给贝宝快递。

处理流程：

用户填写一个表单（这会在总价中增加成本）。他们单击结帐，这就是我检查错误的地方。如果没有错误，将以模式显示“检出”按钮。在结帐按钮上方，我有可以购买不同尺寸的活动商品。当他们向下滚动并单击Paypal结帐按钮时，我必须准备好该总量。这就是为什么我有观察者。

我的问题

有没有办法让观察者观察多个属性。即让它监视帽子的所有数量和尺寸，如果有更改，请致电我可以传递数量和成本的方法。这样，我只能有一个方法和一个观察者？

Answer 1

个人

我不会定义/硬编码每个项目，而是使用对象/项目的属性来定义状态，例如，type可以是从帽衫到独角兽的任何值，也可以是其他值，例如{{1} }可以通过false等禁用。然后，您在ui中所做的就是更新模型/项目。

此外，我还将这些项目抽象为一个组件，以进行咯咯的笑声。

size

Vue.component('cart-item', {
  template: '#cart-item',
  props: ['data', 'index'],
  data() {
    return {
      item: {
        type: this.data.type,
        price: this.data.price,
        size: this.data.size,
        qty: this.data.qty
      }
    }
  },
  methods: {
    updateOrder(e) {
      this.$emit('on-update', this.item, this.index)
    }
  }
});

//
var vm = new Vue({
  el: '#app',
  computed: {
    cartTotal: function() {
      let total = 0
      this.items.forEach(item => {
        total = total + item.qty * item.price
      })
      return total
    }
  },
  data() {
    return {
      items: [{
        type: 'T-shirt',
        price: 9.99,
        size: '',
        qty: 0
      }, {
        type: 'Unicorn Plush Toy',
        price: 3.99,
        size: false,
        qty: 0
      }]
    }
  },
  methods: {
    updateCart(value, index) {
      this.items[index] = Object.assign(this.items[index], value);
    }
  }
});

Vuejs中的观察者过多，我的代码不可扩展

1 个答案: