Javascript VueJS在加载组件数据和提取后端数据后，是否将填充后端数据值的输入值相加？

因此，我有一个表，它填充了表单元格中保存的输入。无论检索到多少输入，这些特定输入都具有相同的类。我需要找到一种方法来确定每个输入的目标值，将它们相加，然后在组件加载/装载时获取后端数据后将该值放入另一个输入中。我可以用vanilla JS和jquery来实现这一点，但显然我需要用VueJS来实现另一种方式，并获取这些数据。如何在VueJS中实现这一点

HTML示例

<input class=".inputs" value="2"></input>
<input class=".inputs" value="2"></input>
<input class=".inputs" value="2"></input>
<input class=".inputs" value="2"></input>

<input class=".result" value="0"></input>

---

通常，您可以添加保存输入值的数据属性。然后观察数组更改以添加它们，并在结果输入中显示它们。以下是一个例子：

newvue({
el:“应用程序”，
数据：{
输入_数组：[2,2,2,2]，
},
挂载：函数（）{
//更新数组值
this.input_数组=[5,3,4,6]；
},
观察：{
输入数组：函数（newValue）{
//每次数组更改时都会添加值
const total=this.input_array.reduce（（acc，val）=>acc+val）；
此.$refs.result.value=总计；
}
}
})

输入{
显示：块；
明确：两者皆有；
填充：0.3em；
}
.结果{
边缘顶部：1.5em；
}

你在Vue.js或vanilla js中试过什么吗？是的，我试过一些挂载的函数和生命周期挂钩，但一无所获。你能给我们看一下这些代码吗？我去掉了它，因为它不起作用。我目前正在通过VueJS文档寻找实现此目的的其他方法。感谢您的输入，@Kalimah。还有一种方法可以从输入本身而不是数组中获取值吗？虽然这是vue.js模式的一种，但您可以使用

document.querySelectorAll（）

访问DOM。或者use可以向每个输入添加

ref

指令，并使用

this从vue访问它。$refs