CODEWITHSUNDEEP
vue.jsvuejs2
hiren keraliya
hiren keraliya

Reputation: 15

Dynamic rendering of the html is not working vue js

new Vue({
    el: '#application',

    data: {
        currencies: [
         {
            'name': 'Dollar',
            'sign': '$'
         }, {
            'name': 'Euro',
            'sign': '€'
         }, {
            'name': 'Pound',
            'sign': '£'
         }, {
            'name': 'Cent',
            'sign': '¢'
         }
      ]
    }
});

<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.

Upvotes: 0

Views: 313

Answers (1)

rcbgalido
rcbgalido

Reputation: 534

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>

Upvotes: 2

Related Questions