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

我在Vue js项目中遇到问题。 我有一个名为total的计算属性，这个属性在被触发时，在一个名为cobrosMarcados的数组上对一个属性monto求和，在我单击cobros数组的复选框后，该属性被填充。真正的问题是，我有两个输入日期范围选择器链接到Vue组件数据变量，但当触发computed属性时，来自日期范围选择器的输入值被重置，并且值为空

这是VUEJS代码

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
                });
            }
        }
    }
  })

newvue({
el:“#应用程序”，
数据：{
眼镜蛇：[
{id:1，名称：“Mantenimiento”，蒙托：2000}，
{id:2，名称：“Piscina”，蒙托：2000}，
{id:3，名称：“Seguridad”，蒙托：2000}，
],
cobrosMarcados:[]，
蒙托帕加多：0，
韦尔通加蒂沃：错，
粪便，
粪便：''
},
计算：{
总数（）{
返回此.cobrosMarcados.reduce（（总计，项目）=>{
返回总数+数量（项目月份）；
}, 0);
},
vuelto（）{
让vuelto=this.montoPagado-this.total；
this.vueltoNegativo=vuelto<0；
返回vuelto；
}
},
方法：{
addCobro（索引）{
让item=this.cobros.find（o=>o.id==index）；
让发现=错误；
for（设i=0；i

这是代码的链接

希望有人能帮助我

---

谢谢。

因为这些元素是

输入

元素，所以应该使用

v-model

而不是

v-bind

e、 g.

请参阅更多：

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

您可以通过a）使用不同的日期选择器，或b）使用

v-on:blur

而不是

v-model

并编写手动更新值的函数来解决此问题

---

请参见此处的示例：

谢谢您的帮助，但仍然存在相同的问题。这是新的代码嗯。。。没有为我重置这些值。这些是你说的

fechainical

和

fechaFinal

值，是吗？是的，你说得对。Vue组件上的值相同。问题在于日期范围选择器，它会清空输入字段上的值。感谢它的工作，似乎问题在于我使用的daterangepicker库。我正在使用boostrap日期选择器。这一个显示了我在我的项目中得到的确切错误。选择一个日期，然后选中一些cobro选项。您应该看到输入值是如何重置的