Как использовать JSON данные в области действия VUE Компонент - PullRequest
Новая
       5

Как использовать JSON данные в области действия VUE Компонент

0 голосов
/ 01 апреля 2020

Я хочу использовать мои JSON данные в области Scoped VUE Component.

Так что в основном мой Json файл содержит CSS стилей в виде текста и HTML тегов.

Я получил значение HTML с v- html в Vue Component.

, но теперь я хочу получить доступ к значению CSS из JSON Файл в CSS Scoped область моего VUE компонента.

MY JSON 

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

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

МОЙ VUE Компонент 

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

1 Ответ

1 голос
/ 01 апреля 2020

Невозможно динамически создавать стили с областью css, так как они создаются vue -router во время сборки, а не в клиенте.

Однако ваш текущий код должен работать, если вы хотите применить стиль элемента <div>, просто включите стиль в фигурные скобки: 

{
   "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">

пример: https://jsfiddle.net/ellisdod/q3L5ahke/

Dynami c Components

Однако, если вы хотите применить стили к элементу, лучше использовать динамические c компоненты. Недостатком этого является то, что вам нужно зарегистрировать все ваши html скрипты как компоненты - вы можете написать al oop, чтобы сделать это программно из вашего 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">

пример: https://jsfiddle.net/ellisdod/oju1m7q8/

...