Как показать HTML из этого массива Vue JS

Question

Я новичок в Vue JS, и я пытаюсь передать таблицу HTML с помощью этого массива, у меня есть выпадающий список, где я выбираю нужный параметр, а затем показывает его, но я могу не могу понять, как я могу поставить HTML там, когда я делаю это печатает код вместо этого. Небольшая помощь будет принята с благодарностью.

Это файл HTML:

        <div id="app">
            <div>
              {{pickedValue}}
            </div>
            <picker v-model="pickedValue"></picker>
        </div>

Это файл JS, и я хочу поместить таблицу HTML в список : ["c", "d", "e"]

  console.clear()

Vue.component("picker",{
  props:["value"],
  data(){
    return {
      list:["c","d","e"],
      currentValue: this.value,
      selectedValue: ""
    }
  },
  template:`
    <div>
      <select @change="currentValue = $event.target.value" v-model="selectedValue">
          <option value="">Select</option>
          <option v-for="item in list" :value="item" :key="item">{{item}}</option>
      </select>
    </div>
  `,
  watch:{
    currentValue(newValue){
      if (!this.list.includes(newValue))
        this.selectedValue = "" 

      this.$emit('input', newValue)
    }
  }
})

new Vue({
  el:"#app",
  data:{
    pickedValue: null
  }
})

Answer 1

Вы должны использовать вместо v-html. Будьте осторожны при использовании этого, потому что, если "c", "d", "e" являются пользовательскими вводами, это может подвергнуть ваше приложение атакам XSS:

    <div id="app">
        <div v-html="pickedValue"></div>
        <picker v-model="pickedValue"></picker>
    </div>

https://vuejs.org/v2/api/#v - html