如何将 JSON 数据解析为 HTML 元素

Question

我有一个带有 HTML 的 JSON 数据。

像这样：

"elements":[
{
   "element":".dyno-text",
   "value":"This fun here.<br> <button type='button' onclick='changeTheme(this)' data-theme='sketchy' class='theme-link btn btn-light'>Sketchy</button>",
   "class": 'text-success'
}
]

我将如何将此 JSON 数据解析为 Bootstrap 布局设计，例如：Button will come to real.

谢谢

Answer 1

使用Vue.component 将 JSON 组装为一个组件可能是一种解决方案。

但您可能需要调整 JSON 格式的 HTML 模板。因为要支持onclick、绑定class等一些功能，会很头疼。

下面是一个演示，它可以为您提供一些如何实现目标的想法。

new Vue ({
  el:'#app',
  data () {
    return {
      "elements":[
        {
           "element":"dyno-text",
           "value":"This fun here.<br> <button type='button' @click='changeTheme(this)' data-theme='sketchy' class='theme-link btn btn-light'>Sketchy</button>",
           "class": 'text-success',
           "methods": {
             // changed onclick to @click, if you still like to use 'onclick' in the template, you have to define window.changeTheme
             changeTheme: function(obj) {console.log('clicked')}
           }
        }
      ]
    }
  },
  methods: {
    createComponent(element) {
      /*window.changeTheme = function () {
        console.log('clicked by onclick')
      }*/
      return Vue.component(element.element, {
        template: `<div ref="test">${element.value}</div>`,
        mounted: function () {
          this.$nextTick(() => {
            this.$refs.test.querySelector('button.btn').classList.add(element.class)
            // or adjust your template in JSON like `<button :class="classes"/>`, then binds element.class to data property=classes
          })
        },
        methods: element.methods
      })
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
    <div class="container">
        <div v-for="(item, index) in elements" :key="index">
          <component :is="createComponent(item)"/>
        </div>
    </div>
</div>

Answer 2

你可以这样做；我更改了元素以创建一个已知的 htmlElement，因此您在这里要做的是迭代您的元素数组并将它们插入到正文中，设置值并切换类。

--编辑--

由于指出了超酷，更清洁的解决方案

Documentation of classList

    let elements=[
    {
       "element":"div",
       "value":"This fun here.<br> <button type='button' onclick='changeTheme(this)' data-theme='sketchy' class='theme-link btn btn-light'>Sketchy</button>",
       "class": 'text-success'
    }
    ]

    elements.forEach((elemen,i)=>{
    
    let createdElement= document.createElement(elemen.element)
    createdElement.innerHTML = elemen.value
    createdElement.classList.toggle(elemen.class)
    document.body.appendChild(createdElement)

      })