鍍金池/ 問答/HTML/ vue 點擊事件如何改變button中的vuale?

vue 點擊事件如何改變button中的vuale?

點擊button時請求數(shù)據(jù)成功之后, 需要把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)">發(fā)布</button>
    </template>
</el-table-column>

    // 發(fā)布
    issuePatrolPlan(index, row) {
      this.$confirm("是否確定發(fā)布該計劃？", {
        confirmButtonText: "確定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$http.put(this.$api.planPublish + row.id).then(res => {
          this.initPatrolPlan();
          this.$message({
            type: "success",
            message: "發(fā)布成功!"
          });
            console.log("row", row);
            // 發(fā)布成功之后改變button的value
            row.published == "已發(fā)布"
              ? (this.$refs.releaseStatus.innerText = "取消")
              : (this.$refs.releaseStatus.innerText = "發(fā)布");
              console.log('this.$refs.releaseStatus.innerText', this.$refs.releaseStatus.innerText);
          // 調(diào)用初始化的數(shù)據(jù)
          this.initPatrolPlan();
        });
      });
    },

未點擊發(fā)布button時
clipboard.png

點擊發(fā)布button后打印數(shù)據(jù)
clipboard.png

clipboard.png

當再次進行刷新頁面, 最后一條的button的value也變回發(fā)布了

clipboard.png

回答
編輯回答
挽青絲

ref寫在循環(huán)里，所以始終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)">發(fā)布</button>
    </template>
</el-table-column>

    // 發(fā)布
    issuePatrolPlan(index, row) {
      this.$confirm("是否確定發(fā)布該計劃？", {
        confirmButtonText: "確定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$http.put(this.$api.planPublish + row.id).then(res => {
          this.initPatrolPlan();
          this.$message({
            type: "success",
            message: "發(fā)布成功!"
          });
            console.log("row", row);
            // 發(fā)布成功之后改變button的value
            row.published == "已發(fā)布"
              ? (this.$refs['releaseStatus' + index].innerText = "取消")
              : (this.$refs['releaseStatus' + index].innerText = "發(fā)布");
              console.log('this.$refs.releaseStatus.innerText', this.$refs.releaseStatus.innerText);
          // 調(diào)用初始化的數(shù)據(jù)
          this.initPatrolPlan();
        });
      });
    },
2017年8月5日 10:32
編輯回答
凹凸曼

你把button的值弄成一個變量不就行了嗎？

2018年9月1日 13:30
編輯回答
情未了

頁面上那么多button，你這個releaseStatus指的是哪個，根本就是隨機的，那只是個模板。
既然用vue了，就遵守vue的原理，用過修改數(shù)據(jù)的方式修改頁面。當記錄發(fā)布后，將row的published設置成true，重新設置list就可以了（別當心性能，vue會自己對比渲染樹的）

<template slot-scope="scope">
    <button class="detach_btn">{{scope.row.published ? '取消' : '發(fā)布'}}</button>
  </template>
2018年9月12日 11:01
編輯回答
神曲
<button ref="'releaseStatus' + scope.$index" class="detach_btn" @click.prevent="issuePatrolPlan(scope.$index, scope.row)">{{scope.row.published == "已發(fā)布" ? '取消' : '發(fā)布'}}</button>
2017年12月8日 22:19