Vue beginners ask for help. Multiple input boxes are dynamically loaded in table. These input boxes are divided into two fields. How can I put the value of each line of input box into an object?

I used the element-ui framework, and I encountered a problem in the project. I couldn"t find a solution in the front-end technology group on the official website.
has tried many ways, but failed to meet the demand.
after I click on the start modal box, some input input boxes are generated based on the nodes of the selected modal box.

<el-table :data=acmodexTreeb style="width: 100%; color: -sharp3a3a3a;"
             :header-cell-style="{background:"-sharpf0f8ff"}" align="center" height="630px">
        <el-table-column prop="code" label="" align="center"></el-table-column>
        <el-table-column prop="name" label="" align="center"></el-table-column>
        <el-table-column  label="" align="center">
          <template inline-template slot-scope="scope">
            <el-input
                @change="changeed(scope.$index,scope.row,$event)"
              placeholder="">
            </el-input>
          </template>
        </el-table-column>
        <el-table-column  label="" align="center">
          <template slot-scope="scope">
              <el-input
                @change="changes(scope.$index,scope.row,$event)"
                placeholder=""></el-input>
          </template>
        </el-table-column>
        <el-table-column  label="" align="center">
          <template slot-scope="scope">
            <AddProCard  :parentMessage="parentMessage"></AddProCard>
          </template>
        </el-table-column>
      </el-table>

this is the effect
clipboard.png
when you click Save, put each line of content into an object, and then put these objects into an array request interface. At present, I can only take the value entered for the last time, how to solve it.
here is the method

methods: {
   //
    changeed(index,row,even){
      console.log("-------------");
      console.log(index);
      console.log(event.target.value);
      console.log(row);
      console.log(even);
      // console.log(even.currentTarget.nextElementSibling);
      this.PI_SalePrice = event.target.value;
      console.log("----------------")
    },
    changes(index,row,even){
      console.log("-------------");
      console.log(index);
      console.log(event.target.value);
      console.log(row);
      console.log(even);
      // console.log(even.currentTarget.previousElementSibling);
      this.PI_FendianPrice = event.target.value;
      console.log("----------------")
    },
    //
    addFendian(){
      var addFendian = [];
      var fendian={};
      var obj ={};

      obj.Pro_GUID = this.AddProject.Pro_GUID;
      obj.FendianCode = this.AddFendian.FendianCode;
      obj.PI_SalePrice = this.AddFendian.PI_SalePrice;
      obj.PI_FendianPrice = this.AddFendian.PI_FendianPrice;
      addFendian.push(obj);
      obj = {};
      fendian.ProductItemFendian = addFendian;
        this.$http.post(CarFendian,this.$qs.stringify(fendian)).then(resp=>{
          // console.log("xxxxxxxxx");
          // console.log(resp.data.data);
          // console.log("xxxxxxxxx");
          if (resp.data.code === 0) {
            this.$notify({
              title: "",
              message: "",
              type: "success"
            });
          }
        })
    },
    

Thank you!


goes astray, using a data-driven framework but developing with the idea of manipulating dom.
I suggest you take a look at the example on elementUI's official website, where you can find the answer you want.

Menu