VueJs: вычисляемые свойства внутри повторного свойства - PullRequest
Новая
       7

VueJs: вычисляемые свойства внутри повторного свойства

0 голосов
/ 06 сентября 2018

Я не уверен, что название вопроса - лучший способ выполнить то, что я пытаюсь сделать, но сначала позвольте мне объяснить проблему:

У меня есть корневой компонент Vue со свойством, определенным в ключе data, например months. В DOM я перебираю свойство, используя v-for="month in months". Каждый из этих month объектов имеет список orders, и для каждого order in orders одна строка отображается в строке с такой информацией, как order.date и order.total. Это все отлично работает.

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

Другим решением может быть использование компонентов, но я не хочу определять шаблон внутри компонента, а использовать то, что определено в HTML. Я еще не нашел способ сделать это. Будет ли это возможно? Есть ли другие возможные решения, которые я упустил из виду?

Ответы [ 3 ]

0 голосов
/ 06 сентября 2018

Как это часто бывает, я нашел решение вскоре после формулировки этого вопроса. Что я сейчас делаю:

Определение свойства в корневом компоненте следующим образом: 

total: function (month) {
    // calculate total
},

В DOM я отображаю его, используя {{ total(month) }} €

Возможно, это не идеальное решение, но пока оно работает. Если у кого-то есть лучшее решение, я все равно буду благодарен за ввод, так как я все еще новичок в vue.js

0 голосов
/ 06 сентября 2018

Я решил это так, как вы хотели в вычисляемой собственности. проверьте это, если найдете что-то интересное. 

<template>
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
            <div v-for="(month,index) in months" :key="index">
                <p>{{ month.name }}</p>
                <ul>
                    <li v-for="(order,index) in month.orders" :key="index">
                        {{ order.title}} Total :{{ order.total}}
                    </li>
                </ul>
                Total for {{ month.name}}: {{ totalMonth[index]}}
                <hr>

            </div>
        </div>
    </div>
</div>


<script>
export default {
    data () {
        return {
            months:[
                {   name: 'January',
                    orders: [
                        {title: 'order1', total: 5},
                        {title: 'order2', total: 8},
                        {title: 'order3', total: 1}
                        ]
                },
                {   name: 'February',
                    orders: [
                    {title: 'order4', total: 15},
                    {title: 'order5', total: 3}
                    ]
                },
                {   name: 'March',
                    orders: [
                    {title: 'order6', total: 25}
                    ]
                }
            ]
        }
    },
    computed: {
        totalMonth () {
            return this.months.map(a => a.orders.map(a => a.total).reduce((a,b) => a + b))
        }
    }
}

0 голосов
/ 06 сентября 2018

Я думаю, что лучшим способом было бы создать компонент для каждого месяца (и каждого заказа, если он действительно необходим). Если вы хотите избежать этого, вы можете сказать в разметке месяца (предполагается, что заказы - это массив чисел): 

<p class="orders_total">{{month.orders.reduce((acc, el, i, arr) => acc + el )}}</p>

Это не очень хорошая практика, потому что мы не должны определять такое преобразование массива в разметке, но оно должно работать.

...