鍍金池/ 問答/HTML/ vue 如何獲取input輸入框里面的值在別的方法里面用

vue 如何獲取input輸入框里面的值在別的方法里面用

<el-table :data="tableData" style="width: 100%;" @selection-change="handleSelectionChange" ref="multipleTable">
             <el-table-column align="center" type="selection" width="55" fixed></el-table-column>
        <el-table-column align="center" prop="name" label="方案名稱" width='120'>
          <!-- <template slot-scope="scope">{{scope.row.beginCardNo}} - {{scope.row.endCardNo}}</template> -->
        </el-table-column>
        <el-table-column align="center" prop ="type" label="兌換類型">
          <!-- <template slot-scope="scope">{{scope.row.cardTypeName}}</template> -->
        </el-table-column>
        <el-table-column align="center"  label="兌換個數(shù)" width="160px" prop ="exchangeNum">
          <template slot-scope="scope">
             <!-- <el-col :span="16"> -->
            <el-input placeholder="請輸入兌換個數(shù)" v-model="scope.row.exchangeNum" @change="change"></el-input>
             <!-- </el-col> -->
          </template>
        </el-table-column>
        <!--<el-table-column align="center" prop="" label="未配送數(shù)量"></el-table-column>-->
        <el-table-column align="center" label="消耗積分" prop="costPointsNum">
          <!-- <template slot-scope="scope">{{scope.row.deposit | money}}</template> -->
        </el-table-column>
        <!-- <el-table-column align="center" label="操作" fixed="right">
          <template slot-scope="scope">
            <a class="operation" @click="deleteItem(scope.row)" v-authority="508003">刪除</a>
          </template>
        </el-table-column> -->
      </el-table>
<el-input placeholder="請輸入兌換個數(shù)" v-model="scope.row.exchangeNum" @change="change"></el-input>

clipboard.png

1.<el-input placeholder="請輸入兌換個數(shù)" v-model="scope.row.exchangeNum" @change="change"></el-input> 已經(jīng)v-model綁定了一個 數(shù)據(jù)，那么應(yīng)該怎么寫才能實(shí)現(xiàn) 兌換個數(shù)下的輸入框修改的同事，消耗積分下的數(shù)字就自動更改 比如 修改成2 的時候 馬上變成20 不知道改怎么獲取input下的值 完成計算
求大神詳解

回答
編輯回答
夢若殤

@change="change(scope.$index,$event)";

methods:{

change(index,e){
    const value = e.target.value;
    this.$set(this.tableData[index],'exchangeNum',value * 10) 
}

}

應(yīng)該是可行的

2018年9月11日 19:56
編輯回答
忠妾

通過計算屬性computed，vue實(shí)例獲取scope.row.exchangeNum的值，在計算屬性里計算后，也就是寫個function返回這個值*10，然后綁定在消耗積分下面那個屬性上就好了

2017年4月7日 07:01
編輯回答
扯機(jī)薄
<el-table-column align="center"  label="兌換個數(shù)" width="160px" prop ="exchangeNum">
          <template slot-scope="scope">
             <!-- <el-col :span="16"> -->
            <el-input placeholder="請輸入兌換個數(shù)" v-model="scope.row.exchangeNum" @change="change"></el-input>
             <!-- </el-col> -->
          </template>
        </el-table-column>
        <el-table-column align="center" label="消耗積分" prop="costPointsNum">
           <template slot-scope="scope">{{scope.row.exchangeNum*10}}</template>
        </el-table-column>
2017年11月15日 01:33