Как получать динамический вывод суммы из двух компонентов?

Question

[Anton8989]

Имеется следующий код, где есть два компонента, пожалуйста подскажите как можно вывести общую сумму из этих двух компонентов при нажатых чекбоксах (данный html нужно, чтобы оставался прежним, он мне нужен будет для верстки:

<div id="app">
  SUM: {{ sum }}
<checkbox-counter1></checkbox-counter1>
<checkbox-counter2></checkbox-counter2>
</div>

)

код:

<div id="app">

    SUM: {{ sum }}


<checkbox-counter1></checkbox-counter1>
<checkbox-counter2></checkbox-counter2>


</div>


<script>

Vue.component('checkbox-counter1', {
  data: function () {
    return {
      items:[
        { value: [3.99, 1], checked: false },
        { value: [4, 2], checked: false },
        { value: [7, 3], checked: false },
      ],
      checkAll: false,
    }
  },
   computed: {
     total() {
      const val1 = this.items.reduce((acc, n) => acc + n.value[0] * n.checked, 0);
      this.$emit('change', val1);
      return val1;
    },
    day(){
        return this.items.reduce((acc, n) => acc + n.value[1] * n.checked, 0);
    }
    },
        watch: {
        checkAll(val) {
        this.items.forEach(n => n.checked = val);
        },
    },
  template: '<div><input v-for="n in items" v-model="n.checked" type="checkbox"> <div>{{ total }}</div> <div>{{ day }}</div> <div><input type="checkbox" v-model="checkAll"></div></div'
})



Vue.component('checkbox-counter2', {
  data: function () {
    return {
      items:[
        { value: [1, 1], checked: false },
        { value: [1, 1], checked: false },
        { value: [1,1], checked: false },
      ],
      checkAll: false,
    }
  },
   computed: {
     total() {
      const val2 = this.items.reduce((acc, n) => acc + n.value[0] * n.checked, 0);
      this.$emit('change', val2);
      return val2;
    },
    day(){
        return this.items.reduce((acc, n) => acc + n.value[1] * n.checked, 0);
    }
    },
        watch: {
        checkAll(val) {
        this.items.forEach(n => n.checked = val);
        },
    },
  template: '<div><input v-for="n in items" v-model="n.checked" type="checkbox"> <div>{{ total }}</div> <div>{{ day }}</div> <div><input type="checkbox" v-model="checkAll"></div></div'
})





new Vue({
  el: '#app',
  data: {
   
  },
  computed: {
    sum() {
       

    }
  }
});

Comments

[Сергей Соколов]

Отредактируйте, пожалуйста, вопрос и оберните коды в тег code (кнопка </>)

[Anton8989]

Сергей Соколов, Отредактировал)

[Антон Антон]

Чем отличается от Как получить сумму результатов 2-х компонентов в vue.js? ?

[Anton8989]

Антон Антон, Необходимо, чтобы html был в таком виде:

<div id="app">
  SUM: {{ sum }}
<checkbox-counter1></checkbox-counter1>
<checkbox-counter2></checkbox-counter2>
</div>

Answer 1

[0xD34F]

А в чём разница между вашими компонентами? В данных? Значит компонент должен быть один и принимать параметры. Ну а в остальном - вы вчера похожий вопрос задавали.

Comments

[Anton8989]

Необходимо, чтобы html был в таком виде:

<div id="app">
  SUM: {{ sum }}
<checkbox-counter1></checkbox-counter1>
<checkbox-counter2></checkbox-counter2>
</div>

[0xD34F]

Anton8989, вы конечно извините, но это какая-то дурь, бред сумасшедшего. Кто это придумал? Вы? - срочно отказывайтесь от подобной идеи. Кто-то ещё? - объясните этому человеку, что он ошибается.

"В таком виде" - что, и обработчики событий подключать нельзя? Ну тогда используйте для пересылки данных vuex или глобальную шину событий.

[Anton8989]

0xD34F, Спасибо, буду думать как решить это с помощью глобальной шины событий

[0xD34F]

Anton8989, да нечего тут думать, всё тривиально.

[Anton8989]

0xD34F, Спасибо вам Большое))))