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

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

1 个答案: