I have a custom-preset.js file containing the following code. I am using this to obtain a dynamic value for the background color of a button.
var customPresets;
export default customPresets = color => (
{
"id": 0,
"name": "custom",
"html": `<button id='changecolor' style='color: rgb(255, 255, 255); background-color: ${color}; border-color: rgb(158, 50, 168);'>Accept</button>`
}
)
I am trying to display the HTML returned from this JavaScript in a Vue file. Here is the code I have in the Vue file:
<b-form-radio-group>
<b-form-radio v-for="customPreset in customPresets">
<div v-html="customPreset.html"></div> /// unable to print this
</b-form-radio>
</b-form-radio-group>
import customPresets from './custom-preset';
mounted () {
console.log(customPresets); /// I am able to get the output correctly
}
https://i.sstatic.net/kpZJ5.png
Unfortunately, I cannot print console.log(customPresets.id) as it returns undefined. I am looking for a way to access the HTML (key-value pairs) in the Vue file.