vue 点击事件如何改变button中的vuale?

Question

点击button时请求数据成功之后, 需要把button中的value改变, 自己是通过this.$refs来改变value的值和配合this.$nexttick事件来操作, 但是都不起效果

<el-table-column label="操作" width="100">
    <template slot-scope="scope">
        <button ref="releaseStatus" class="detach_btn" @click.prevent="issuePatrolPlan(scope.$index, scope.row)">发布</button>
    </template>
</el-table-column>

    // 发布
    issuePatrolPlan(index, row) {
      this.$confirm("是否确定发布该计划？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$http.put(this.$api.planPublish + row.id).then(res => {
          this.initPatrolPlan();
          this.$message({
            type: "success",
            message: "发布成功!"
          });
            console.log("row", row);
            // 发布成功之后改变button的value
            row.published == "已发布"
              ? (this.$refs.releaseStatus.innerText = "取消")
              : (this.$refs.releaseStatus.innerText = "发布");
              console.log('this.$refs.releaseStatus.innerText', this.$refs.releaseStatus.innerText);
          // 调用初始化的数据
          this.initPatrolPlan();
        });
      });
    },

未点击发布button时

点击发布button后打印数据

当再次进行刷新页面, 最后一条的button的value也变回发布了

Answer 1

<button ref="'releaseStatus' + scope.$index" class="detach_btn" @click.prevent="issuePatrolPlan(scope.$index, scope.row)">{{scope.row.published == "已发布" ? '取消' : '发布'}}</button>

Answer 2

你把button的值弄成一个变量不就行了吗？

Answer 3

ref写在循环里，所以始终ref始终会是最后一个button的引用

试试下面这样

<el-table-column label="操作" width="100">
    <template slot-scope="scope">
        <button :ref="'releaseStatus' + scope.$index" class="detach_btn" @click.prevent="issuePatrolPlan(scope.$index, scope.row)">发布</button>
    </template>
</el-table-column>

    // 发布
    issuePatrolPlan(index, row) {
      this.$confirm("是否确定发布该计划？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$http.put(this.$api.planPublish + row.id).then(res => {
          this.initPatrolPlan();
          this.$message({
            type: "success",
            message: "发布成功!"
          });
            console.log("row", row);
            // 发布成功之后改变button的value
            row.published == "已发布"
              ? (this.$refs['releaseStatus' + index].innerText = "取消")
              : (this.$refs['releaseStatus' + index].innerText = "发布");
              console.log('this.$refs.releaseStatus.innerText', this.$refs.releaseStatus.innerText);
          // 调用初始化的数据
          this.initPatrolPlan();
        });
      });
    },

Answer 4

页面上那么多button，你这个releaseStatus指的是哪个，根本就是随机的，那只是个模板。
既然用vue了，就遵守vue的原理，用过修改数据的方式修改页面。当记录发布后，将row的published设置成true，重新设置list就可以了（别当心性能，vue会自己对比渲染树的）

<template slot-scope="scope">
    <button class="detach_btn">{{scope.row.published ? '取消' : '发布'}}</button>
  </template>