Как забирать значение у каждого элемента массива и добавлять в блок?

Question

[ohwoow]

Я передаю массив с объектами из компонента в родителя и из родителя в другой компонент (сайдбар)
Мне нужно выводить количество товара в span и я не понимаю как это сделать без v-for, ведь с v-for у меня каждый раз добавляется новый span и верстка ломается

<span class=""  v-for="item in checkedInput">
            {{item.products.length}}
   </span>

Comments

[Вадим]

Сделать вычисляемое свойство в компоненте, в котором нужно выводить информацию, где будет подсчитываться через reduce количество элементов.

<span>
  {{ productsCount }}
</span>

computed: {
  productsCount() {
    return this.checkedInput.reduce((acc, i) => { acc+= i.products.length; return acc }, 0)
  }
}

Но это примерно, Так как кода и контекста Вы даёте очень мало.

[WbICHA]

Вадим, мы же не объект мутируем.)
reduce((acc, i) => acc + i.products.length, 0)

[Вадим]

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

[ohwoow]

Вадим, Спасибо!

[WbICHA]

Вадим, возвращать явно и мутировать аргумент без надобности — это всё же разные вещи.)

Answer 1

[Вадим]

Сделать вычисляемое свойство в компоненте, в котором нужно выводить информацию, где будет подсчитываться через reduce количество элементов.

<span>
  {{ productsCount }}
</span>

computed: {
  productsCount() {
    return this.checkedInput.reduce((acc, i) => { acc+= i.products.length; return acc }, 0)
  }
}