How to show HTML from this array Vue JS

Question

I'm new to Vue JS and I'm trying to pass an HTML table using this array, I have a dropdown where I select the option I want and then it shows it, but I can't figure out how can I put HTML in there, when I do it prints code instead. A little help would be greatly appreciated.

This is the HTML file:

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

This is the JS file and I want to put an HTML table inside list:["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
  }
})

"but I can't figure out how can I put HTML in there" can you explain this with an example like what you want to show and how that suppose to happen using the dropdown? — palaѕн
– palaѕн, Commented Apr 12, 2020 at 8:58
When I select a value from the dropdown I want it to show an HTML table, this table should be inside list:["c","d","e"] instead of this letters, but when I do it shows the HTML code, not a table. Maybe this isn't possible or I'm doing something wrong. — Sethei
– Sethei, Commented Apr 12, 2020 at 9:00
may be you can keep the table in parent template only and using v-if show them based on select option selected — palaѕн
– palaѕн, Commented Apr 12, 2020 at 9:02
What HTML exactly and where does it originate from? It's possible with v-html but is unsafe. Please, explain your case. — Estus Flask
– Estus Flask, Commented Apr 12, 2020 at 9:20

tony19 · Accepted Answer · 2022-07-15 01:31:49Z

1

You should use v-html instead. Be careful when using this because if "c", "d", "e" are user inputs, it could expose your application to XSS attacks:

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

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

edited Jul 15, 2022 at 1:31

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 12, 2020 at 9:05

Hammerbot

16.5k13 gold badges67 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to show HTML from this array Vue JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related