У меня слишком много наблюдателей в Vuejs, и мой код не масштабируется

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()
},

Это только показывает наблюдателядля 2 размеров из 5 на единицу.Там может быть более 3 предметов.

Я использую Django, и я думал о том, чтобы просто оставить все это на стороне базы данных, но я обрабатываю оплату с этой страницы.

Процесс состоит в том, что я передаю всю сумму PayPal Express непосредственно с этой страницы.

Ход процесса:

Пользователь заполняет форму(это добавляет стоимость к общей цене).Они нажимают кнопку проверки, где я проверяю ошибки.Если ошибок нет, кнопка проверки становится видимой в модальном режиме.Над кнопкой оформления заказа у меня есть товары, которые они могут купить в разных размерах.Мне нужно подготовить эту сумму, когда они прокрутят вниз и нажмут кнопку оформления PayPal.Вот почему у меня есть наблюдатели.

Мой вопрос

Есть ли способ, чтобы наблюдатель наблюдал за несколькими свойствами.то есть, чтобы он следил за всеми количествами и размерами шляп, а если что-то изменилось, вызываю метод, в котором я могу передать количество и стоимость.Таким образом, у меня может быть только один метод и один наблюдатель?

Answer 1

Лично

Я бы не определял / не жестко кодировал каждый элемент, а использовал бы свойство объекта / элемента для определения состояния, поэтому, например, type может быть чем угодно, от толстовок до единорогов и другихзначение типа size может быть отключено с помощью false и т. д. Затем все, что вы делаете в пользовательском интерфейсе, это обновляет модель / элемент.

Кроме того, я бы абстрагировал элементы в компонент для смеха.

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);
    }
  }
});

  Order Form

  

  Total cart cost: ${{ cartTotal }}

  {{ items }}

{{item.type}}
{{item.price}}
размер sml med lrg xlrg

Кол-во