计算属性触发后输入值为空

Question

我在一个 Vue js 项目中遇到了问题。 我有一个名为 total 的计算属性，当该属性被触发时，在一个名为 cobrosMarcados 的数组上计算一个属性 monto 的总和，在我单击 cobros 数组的复选框后填充该属性。真正的问题是我有 2 个输入 date-rangepicker 链接到一个 Vue 组件数据变量，但是当计算属性被触发时，来自 date-rangepicker 的输入值被重置并且值为空。

这是 Vue js 代码

new Vue({
   el: '#app',
   data: {
     cobros: [
        {id:1,nombre:"Mantenimiento",monto:2000},
        {id:2,nombre:"Piscina",monto:2000},
        {id:3,nombre:"Seguridad",monto:2000},
     ],
     cobrosMarcados: [],
     montoPagado: 0,
     vueltoNegativo: false,
     fechaInicial: '',
     fechaFinal: ''
   },
   computed:{
        total(){
            return this.cobrosMarcados.reduce((total, item) => {
                return total + Number(item.monto);
            }, 0);
        },
        vuelto(){
            let vuelto = this.montoPagado - this.total;
            this.vueltoNegativo = vuelto < 0;
            return vuelto;
        }
    },
    methods:{
        addCobro(index){

            let item = this.cobros.find(o => o.id === index);
            let found = false;

            for (let i = 0; i < this.cobrosMarcados.length; i++) {
                if(this.cobrosMarcados[i].id === item.id){
                    found = true;
                    this.cobrosMarcados.splice(i,1);
                    break;
                }
            }

            if(!found){
                this.cobrosMarcados.push({
                    id: item.id,
                    nombre: item.nombre,
                    monto: item.monto
                });
            }
        }
    }
  })

这里是代码链接 https://jsfiddle.net/alonsourena/syLrqekm/

希望有人可以帮助我

谢谢。

Answer 1

由于这些元素是input 元素，您应该使用v-model 而不是v-bind。

例如<input type="text" class="input-sm form-control" id="fechaInicial" name="fechaInicial" v-model="fechaInicial"/>

查看更多：https://vuejs.org/v2/api/#v-model

编辑：您发现了第二个问题——您使用的日期选择器组件不能很好地与 Vue 配合使用。

您可以通过 a) 使用不同的日期选择器或 b) 使用 v-on:blur 而不是 v-model 并编写一个手动更新值的函数来解决它。

在此处查看示例：https://stackblitz.com/edit/js-bth9j8