Question

我正在尝试计算动态字段之间的差异，然后添加所有差异。我正在使用日期字段，因为我需要记录每组日期之间的差异，然后结果将是总年数。我提供了一个如下例子

<div id="app">
<form action="">
  <div class="group" v-for="(group,id) in groups" :key="id">
    <input type="text" v-model="group.from">
    <input type="text" v-model="group.till">

    <button @click="removeGroup(id)">Remove</button>
  </div>
</form>
<button @click="addGroup">add</button>

<h2>Results</h2>
{{ result }}

<pre>{{ $data }}</pre>

所以，我的想法是，我应该能够计算＆＃34;来自＆＃34;领域和＆＃34;直到＆＃34; groups数组中的字段，但同时结果应反映所有差异的总和。我试着用手表，但实际上有很多领域，我可能会过度思考。会很感激一些帮助。这是vue代码

var vm = new Vue({

    data: {
        groups: [
            {
                from: '',
                till: ''
            }
        ],

    },

    computed: {
        result() {
            return 0
        }
    },
    methods: {
        addGroup: function () {
            var additional = {
                from: '',
                till: ''

            }
            this.groups.push(additional)
        },
        removeGroup: function (id) {
            var index = this.groups[id]

            this.groups.splice(index, 1)

        },

    }


}).$mount('#app')

Answer 1

只需使用计算属性即可。由于groups反应性，对this.groups的任何引用都会触发更新：

import moment from 'moment'

... 

// assuming your date is a string
computed: {
    result() {
        return this.groups.reduce((group, total) => {
             return total + moment(group.from).diff(group.till, 'years')
        }, 0)
    }
},

<强>更新

现在我知道你正在处理日期，我建议像一个时刻或者非常的图书馆。 Here's how to calculate differences with moment

如何计算动态字段的结果

1 个答案: