changing a button text dynamically in Vuejs

Question

I want to change my button's text if a value is true/false. here is my code:

<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";
      }
    }
  },

It does change the value of expanded and tableButtonText but the screen doesn't display the button at all. Seems the issue is that html doesn't render {{ tableButtonText }}. What seems to be the issue and how can I fix it?

Can you share a demo or a fiddle of the problem?

Majed Badawi
– Majed Badawi

2020-08-16 18:19:07 +00:00
Commented Aug 16, 2020 at 18:19 — Majed Badawi
– Majed Badawi, Commented Aug 16, 2020 at 18:19

user13278024 · Accepted Answer · 2020-08-16 18:30:58Z

The expanded field should be marked as boolean (defaults to false) during initialisation, not to an empty string. Also, you're missing the template field to wrap your 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.";

      */
   }
}

Collectives™ on Stack Overflow

changing a button text dynamically in Vuejs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related