JSON data button click is not working in Vuejs

Question

I saw this Question but here no approach shown.

"element": [
  {
   "value": "<button @click='changeTheme()' class='theme-link btn btn-light'>Default</button>",
   "class": "text-success"
  }
]

I have bind the JSON data with Vue Component like the below:

<p v-else v-html="element[0].value"></p>

Now, I am trying to call this method. But it's not firing!

methods: {
  changeTheme() {
     alert("Y");
  }
}

I saw the Question but here no approach shown. I have no option to save data in database. — aspile
– aspile, Commented Aug 31, 2020 at 9:33
there's only an approach to render the vue component, check this but if you apply it here will not recognize the methods since the methods are defined in parent component — Boussadjra Brahim
– Boussadjra Brahim, Commented Aug 31, 2020 at 10:00
There is no way to solve this with my approach? If I use method in JSON then? — aspile
– aspile, Commented Aug 31, 2020 at 10:06
it's complicated, you could use the approach that i mentioned in the comment above but you should also find a way to pass events and data to the dynamic component — Boussadjra Brahim
– Boussadjra Brahim, Commented Aug 31, 2020 at 10:14

Fábio Garcia · Accepted Answer · 2020-09-04 08:00:30Z

0

Maybe separate the action from the button by putting it on the object on a different key, and calling it on click of the element:

"element": [
  {
   "value": "<button class='theme-link btn btn-light'>Default</button>",
   "class": "text-success",
   "action": function () {alert("Y")}
  }
]

<p v-else v-html="element[0].value" @click="element[0].action"></p>

answered Sep 4, 2020 at 8:00

Fábio Garcia

995 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JSON data button click is not working in Vuejs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related