When element's checkbox updates the number of bound groups, the original v-model bound to true is retained and not refreshed?

for example, how to reset the selected state?
Business scenario: after selecting the first data in the table, switch the decoration location and re-request API. The first data is still selected, but the parameter of this data is false

.

Table Code: 

<el-table :data="tableData" border highlight-current-row style="width: 100%;margin-bottom: 10px">
  <el-table-column width="55" align="center">
    <template scope="scope">
      <el-checkbox :checked="scope.row.check" @change="handleSelectionChange(scope.row)"></el-checkbox>
    </template>
  </el-table-column>
  <el-table-column prop="name" label="" align="center"></el-table-column>
  <el-table-column prop="unit_name" label="" align="center"></el-table-column>
  <el-table-column prop="color" label="" align="center"></el-table-column>
  <el-table-column label="" align="center" width="130">
    <template scope="scope">
      <el-input-number v-model="scope.row.nums" :min="0" style="width: 100%" size="small" @change="numberChange"></el-input-number>
    </template>
  </el-table-column>
</el-table>

:

js Code: 

//
getUserGoodsList() {
  let params = {
    "access-token": this.token,
    "classify_id": this.goodsType.position
  }
  getGoodsList(params).then(res => {
    let _this = this
    // console.log(res.data)
    _this.tableData = res.data.items
    if (_this.tableData) {
      _this.tableData.forEach(item => {
        item.check = false
      })
    }
  })
}
//
handleSelectionChange(row) {
  if (row.check == true) {
    row.check = false
  } else {
    row.check = true
  }
},
Vue.js element-ui
Mar.19,2021

write

like this

clipboard.png 


_this.tableData = res.data.items
    if (_this.tableData) {
    _this.tableData.map((v,i) =>{
    v.check = false
        _this.tableData.$set(i, {  
                            v: v
                        })  
    })
     
    }
Add a table attribute

to the

table. 

<el-table :data="tableData" border highlight-current-row v-if="table">
  
</el-table>

the dom view loads

when you hide and show it when you get the data. 
//
getUserGoodsList() {
  let params = {}
  this.table = false
  getGoodsList(params).then(res => {
    
    this.table = true
  })
}

Previous: Axios request Custom Settings header

Next: How do you manipulate the style of one of the li elements that are looped out of vue v-for?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu