使用vue遇到的坑

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)

猜你喜欢

转载自blog.csdn.net/u011662320/article/details/85165325