Dynamic rendering of the html is not working vue js

Question

new Vue({
    el: '#application',

    data: {
        currencies: [
         {
            'name': 'Dollar',
            'sign': '&#36;'
         }, {
            'name': 'Euro',
            'sign': '&euro;'
         }, {
            'name': 'Pound',
            'sign': '&pound;'
         }, {
            'name': 'Cent',
            'sign': '&cent;'
         }
      ]
    }
});

<select class="custom-select" v-model="quotationForm.currency">
    <option v-for="currency in currencies" v-bind:value="currency.sign">
       <span v-html="currency.sign"></span>
       {{ currency.name }}
    </option>
</select>

Currency sign can not been rendered on the select box.

But when i try to make statis it's works fine as per given below...

<select class="custom-select" v-model="quotationForm.currency">
    <option v-for="currency in currencies" v-bind:value="currency.sign">
        &euro;
        {{ currency.name }}
    </option>
</select>

Whyv-html is not works in the select box? have any suggestion

Thank You.

rcbgalido · Accepted Answer · 2019-12-27 08:40:32Z

2

I tested it on my own and it's working: Link

<template>
  <select class="custom-select" v-model="quotationForm.currency">
   <option :key="index" v-for="(currency, index) in currencies" v-bind:value="currency.sign">
     <span v-html="currency.sign"></span>
       {{ currency.name }}
   </option>
  </select>
</template>
<script>
export default {
    data() {
     return {
       quotationForm: {
         currency: null
       },
       currencies: [
        {
          'name': 'Dollar',
          'sign': '&#36;'
        }, {
          'name': 'Euro',
          'sign': '&euro;'
        }, {
          'name': 'Pound',
          'sign': '&pound;'
        }, {
          'name': 'Cent',
          'sign': '&cent;'
        }
      ]
    }
 }
}
</script>

answered Dec 27, 2019 at 8:40

rcbgalido

5343 silver badges11 bronze badges

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

1 Comment

hiren keraliya Over a year ago

Thaks for your response i really apologize for it.

Collectives™ on Stack Overflow

Dynamic rendering of the html is not working vue js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related