Vue.js 单击按钮时发出输入事件以编程方式更改输入v模型

我正在尝试使用+和-旋转按钮创建一个自定义的

输入编号

，以增加或减少通过

http请求接收的当前
值
，如果我直接在
输入上键入数字
它会更改值，并且当我通过
表单POST
保存内容时，它会工作，但如果我执行element.step up/Down，值似乎会更改，但通过
POST
接收的值与原始值相同

我试图用
this.$emit（'input'，newValue）
触发一个输入事件，但它不起作用，因为我无法指定要更改的目标。我试图触发一个自定义事件
this.$emit（'spin-button'，value）
，但输入无法通过
v-on:spin-button=“myFunc（）”
监听emmited事件

v-model
不能是
数据变量
，因为它是一种动态形式，包含100多个
输入

我只需要在我进行升/降以更改值后单击旋转按钮时发送一个输入事件，但我无法实现它

是否有方法将事件发送到其他元素或同级元素？
进行此操作并更改模型值的正确方法是什么？我尝试了
：value
，但结果是一样的


const-app=新的Vue({
方法：{
showVal（数据）{
console.log（数据）
}
},
递增递减编号（操作、事件）{
开关（动作）{
格“+”：{
event.target.parentElement.previousElementSibling.Steppup（）
打破
}
案例“-”：{
event.target.parentElement.nextElementSibling.steppdown（）
打破
}
}
},
})

-
+
您可以创建自己的组件，以便更好地控制正在发生的事情。
这也将允许您在其他地方轻松地重用它

下面是如何实现这一点的最小示例，但可以扩展以获得更好的灵活性


Vue.component（'spin-button'{
模板：“#旋转按钮”，
道具：{
“价值”：{
必填项：true
}
},
计算：{
内部价值：{
得到（）{
返回此.value；
},
设置（值）{
此.$emit（'input'，value）
}
}
},
方法：{
递增递减编号（操作）{
开关（动作）{
格“+”：
此.$refs['input'].steppup（）
打破
案例“-”：
此.$refs['input'].steppdown（）
打破
}
/*这里需要手动$emit，因为上面的方法不会触发我们的计算集方法*/
this.$emit（'input'，this.$refs['input'].value）
}
}
})
新Vue({
el:“应用程序”，
数据（）{
返回{
问题:{
存储的数据：{
答复:5
}
}
}
},
})

{{question.storaged_data.answer}}
-
+
尝试修改
问题。存储数据。直接回答
属性。这样，它将传播到输入元素。但我需要它来增加输入的相同步骤。应该像输入数字那样验证数字，使用最小值和最大值。在代码段中似乎可以工作。您能解释一下$attrs是什么意思吗？$attrs包含从父级传递的属性。在本例中，我将它绑定到输入。这就是将
步骤
、
最小值
和
最大值
道具应用于输入的方式。因此。。。我不需要设置所有的HTML属性作为道具？太神了如果没有新的组件，就没有办法做到这一点？没错，你不需要定义你想要使用的所有道具。这只是普通的输入属性，那么它们应该可以与just
v-bind=“$attrs”
配合使用。也许有一种方法可以不用它，但我个人认为拥有一个组件对于可重用性更好。