Laravel 如何计算两个输入值并将结果放入另一个变量？

我有按钮A和按钮B，当这些按钮被点击时 两个有一些值的输入框我想存储这两个输入框的总数，还想动态创建它们的标签

<template>
<div>      <form type="get" action="/asd">
    <div>

        <label>Add A</label>
        <button type="button"  @click="addRow">100</button>
    </div>
    <div> <label>Add B</label>
        <button type="button"  @click="addRow1">200</button>
    </div>

    <div v-for="row in rows" :key="row.id">
        <button-counter :name ="row.name" :id="row.id" :value="row.value"></button-counter>
    </div>   <div>total = ?</div>
    <button>submit</button>
    </form>
</div>

添加
100
加B
200
总数=？
提交

Vue.组件（“按钮计数器”{
道具：{
价值：{
默认值：“
}
},
模板：“”
});
导出默认值{
数据（）{
返回{
行：[]，
计数：0
};
},
方法：{
addRow:function（）{
var txtCount=1；
让id=“txt_216;”+txtCount；
this.rows.push（{name:'A'，value:100，description:“textbox1”，id}）；
},
addRow1:函数（）{
var txtCount=1；
让id=“txt2”+txtCount；
this.rows.push（{name:'B'，value:200，description:“textbox2”，id}）；
}
}
};

---

上述代码在Laravel 5.8中作为vuejs组件使用。上述代码在Laravel 5.8中作为vuejs组件使用

<script type="text/javascript">
Vue.component("button-counter", {
    props: {
        value: {
            default: ""
        }
    },
    template: '<input name=row.name type="text" style="margin-top: 10px;" v-model="value" >'
});

export default {
    data() {
        return {
            rows: [],
            count: 0
        };
    },
    methods: {
        addRow: function() {
            var txtCount = 1;
            let id = "txt_" + txtCount;

            this.rows.push({ name:'A',value:100, description: "textbox1", id });
        },
        addRow1: function() {
            var txtCount = 1;
            let id = "txt2_" + txtCount;
            this.rows.push({name:'B',value:200, description: "textbox2", id });
        }
    }
};