1.在使用vue数组的时候,在数组里面的对象添加数据,该数据对应的页面并不会改变,及该数据的改变会无法驱动页面的更新。
getProductList() {
this.productListLoading = true
fetchGetProductsByComboId(this.comboId, this.page, this.size).then(response => {
this.productListLoading = false
this.productList = response.response
this.productList.forEach(product => {
this.$set(product, 'editProbability', false)
})
this.total = response.total
})
},
<el-table-column prop="probability" label="获奖概率">
<template slot-scope="scope">
<span v-if="!scope.row.editProbability">{{ scope.row.probability }}</span>
<el-button v-if="!scope.row.editProbability" type="text" size="mini" @click="editProbabilityButton(scope.row)">修改</el-button>
<el-input v-if="scope.row.editProbability" v-model="scope.row.newProbability" style="width:100px" type="text"/>
<el-button v-if="scope.row.editProbability" type="text" size="mini" @click="saveProbability(scope.row)">提交</el-button>
</template>
</el-table-column>
// 保存概率
saveProbability(product) {
if (product.newProbability > 100 || product.newProbability < 0) {
this.$message({ message: '请输入1-100的概率范围', type: 'error', duration: 2000 })
return false
}
if (product.newProbability === null || product.newProbability === '') {
this.$message({ message: '请输入概率', type: 'error', duration: 2000 })
return false
}
if (product.newProbability === product.probability) {
product.editProbability = false
return false
}
var comboProduct = {}
comboProduct.comboId = this.comboId
comboProduct.productId = product.id
comboProduct.probability = product.newProbability
fetchSaveComboProduct(comboProduct).then(response => {
if (response.code === 0) {
this.$message({ message: '修改成功', type: 'success', duration: 2000 })
product.editProbability = false
product.probability = product.newProbability
}
})
},
// 修改概率
editProbabilityButton(product) {
product.editProbability = true
product.newProbability = product.probability
},
说明:本人是想在返回的productList中添加一个字段editProbability,用于按钮的判断,之后再改变editProbability,这个数据并不会渲染界面。导致界面不会改变。所以需要这样处理新增数组中的属性:
this.$set(product, 'editProbability', false)