How To Get A JSON Object And Put In A CSS

I need to transform a JSON object to put in a CSS I try do that with vue js, to make a map legend using v-for and generate a legend, but if you know a way than make works get a JSO

Solution 1:

Simply Try This

Vue.component('MyElement',{
    template:'<div>This is my style</div>'
})

new Vue({
  el: '#app',
  data() {
    return {
      myStyle: {
        'width': '100%',
        'height': '100px',
         'padding': '10px',
        'background-color': 'lime',
      },
    };
  },
  template: `<component is="MyElement" :style="myStyle"/>`
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app"></div>

Solution 2:

Does this help:

Vue.component('some-component', {
  template: `
    <div>
      <div :style="someStyle"></div>
      <div>This is some component</div>
    </div>
  `,
  data() {
    return {
      someStyle: {
        width: '15em',
        height: '15em',
        'background-color': 'skyblue',
      },
    };
  },
});

Source: https://forum.vuejs.org/t/how-to-apply-an-inline-style-inside-a-component/12829/2