[Vuejs]-How to use JSON data in Scoped area of VUE Component

by

1👍

✅

It’s not possible to dynamically create scoped css styles as these are made by vue-router during the build and not in the client.

However your current code should work if you want to apply the style to the <div> element, just include the styling within the curly brackets: 

{
   "id":"11",
   "html":"<button>this is button</button>",
   "style":"font-size:18vw;color:#f00;",
   "author":"Test"
}


<div class="elements-head" v-html="item.html" :style="item.style">

example: https://jsfiddle.net/ellisdod/q3L5ahke/

Dynamic Components

However, If you want to apply styles to the element it’s better to use dynamic components. The drawback to this is that you need to register all of your html scripts as components – you could write a loop to do this programmatically from your json.

Vue.component('MyButton',{
template:'<button>this is button</button>'
})

{
    "id":"11",
    "component":"MyButton",
    "style":"font-size:18vw;color:#f00;",
    "author":"Test"
}

<component :is="item.component" :style="item.style">

example: https://jsfiddle.net/ellisdod/oju1m7q8/

👤ellisdod

Leave a comment