How vue Click events change vuale? in button

after the data is successfully requested when clicking button, you need to change the value in button. You need to change the value of value through this.$refs and cooperate with the this.$nexttick event, but it has no effect. 

<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);
            // buttonvalue
            row.published == ""
              ? (this.$refs.releaseStatus.innerText = "")
              : (this.$refs.releaseStatus.innerText = "");
              console.log("this.$refs.releaseStatus.innerText", this.$refs.releaseStatus.innerText);
          // 
          this.initPatrolPlan();
        });
      });
    },

when publishing button is not clicked
clipboard.png

button
clipboard.png

clipboard.png

, buttonvalue

clipboard.png

Vue.js
May.10,2021

can't you just make the value of button a variable?

ref is written in a loop, so ref is always the last reference to button

try this 

<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);
            // buttonvalue
            row.published == ""
              ? (this.$refs['releaseStatus' + index].innerText = "")
              : (this.$refs['releaseStatus' + index].innerText = "");
              console.log('this.$refs.releaseStatus.innerText', this.$refs.releaseStatus.innerText);
          // 
          this.initPatrolPlan();
        });
      });
    },
There are so many button, on the

page. Which one do you mean by this releaseStatus? it's random at all. It's just a template.
now that I use vue, I follow the principle of vue and modify the page by modifying the data. When the record is released, just set the published of row to true, and reset list (don't worry about performance, vue will compare the rendering tree by itself) 

<template slot-scope="scope">
    <button class="detach_btn">{{scope.row.published ? '' : ''}}</button>
  </template>
<button ref="'releaseStatus' + scope.$index" class="detach_btn" @click.prevent="issuePatrolPlan(scope.$index, scope.row)">{{scope.row.published == "" ? '' : ''}}</button>

Previous: WeChat Mini Programs textarea

Next: Svn folder submission in linux

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