如何在VUE Component的Scoped区域使用JSON数据

Question

I want to use my JSON data in the Scoped area of VUE Component.

So basically my Json file contains CSS styles as text and HTML tags.

I got the HTML value with v-html in Vue Component.

but now I want to access the CSS value from JSON File in CSS Scoped area of my VUE Component.

MY JSON

{
    "elements":[
           {
             "id":"11",
             "html":"<button>this is button</button>",
             "css":"button{color:#f00;}",
             "author":"Test"
           }
    ]
}

======================

MY VUE Component

<template>
<div class="collection">
    <section class="section section-elements">
        <div class="container container--large">
            <div class="row">
                <div class="col-sm-3" v-for="(item, index) in json.elements" v-bind:key="index">
                    <div class="elements">

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

                        </div>
                        <div class="elements-main">
                            <p>{{ item.css }}</p>
                        </div>
                        <div class="elements-foot">
                            <p>{{ item.author }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

Answer 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/