在Vue.js中动态更改按钮文本

如何解决在Vue.js中动态更改按钮文本

如果值是true / false，我想更改按钮的文本。 这是我的代码：

<button
  class="btn btn-primary table-button"
  type="button"
  data-toggle="collapse"
  :data-target="`#collapse${row.num}`"
  aria-expanded="false"
  aria-controls="collapseExample"
  @click="expanded = !expanded"
  ref="tableButtonText">
     {{ tableButtonText }}
</button>

data(){
  return{
    expanded:"",tableButtonText:""
  }
},watch: {
    expanded() {
      if (this.expanded) {
        this.tableButtonText = "Hide details";
      } else if (!this.expanded) {
        this.tableButtonText = "View details";
      }
    }
  },

它确实更改了expanded和tableButtonText的值，但是屏幕上根本没有显示该按钮。似乎问题在于html无法呈现{{ tableButtonText }}。似乎是什么问题，我该如何解决？

解决方法

expanded字段在初始化期间应标记为布尔值（默认为false），而不是空字符串。另外，您缺少template字段来包装HTML。

template:
`
<button
  class="btn btn-primary table-button"
  type="button"
  data-toggle="collapse"
  :data-target="`#collapse${row.num}`"
  aria-expanded="false"
  aria-controls="collapseExample"
  @click="toggleView">
     {{ text }}
</button>
`,data() {
   return {
      expanded: false,text: "View details."
   }
},methods: {
   toggleView() {
      this.expanded = !this.expanded;

      if (this.expanded) {
         this.text = "Hide details.";
      } else {
         this.text = "View details.";
      }

      /*

      OR ...

      this.text = (this.expanded)
         ? "Hide details."
         : "View details.";

      */
   }
}