search

vuejs / Discussion

Vue.js discussion
167 stars 17 forks source link

Components not working in IE ? (in a v-for loop) #489

Closed ehben83 closed 8 years ago

ehben83 commented 8 years ago

Hi,

I'm struggling on this for the past few days ... and don't understand what's wrong. I have created components, that work on Chrome, Firefox and Safari but not IE (IE9, IE10, IERemote) !

In IE, the property of the component ("verified") doesn't seem to have value, leading to a javascript error. Using this vue.js : 

 <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.17/vue.js"></script>

HTML (the listing.verified contains true of false value)

// the below is contained in a v-for loop (v-for="listing in listings") :
 <verified :verified="listing.verified"></verified>

Template (the verified prop doesn't seem to have any value in the verified template (in IE only, in other browsers : OK !).

<!-- verified template -->
<template id="verified-template">
  <span 
  title="Verified!" data-toggle="tooltip" data-placement="bottom"
  :class="['verified', verified ? 'icomoon-checkmark-circle' : '']"></span>
</template>

Component : 

components: {
    verified: {
    template: '#verified-template',
    props : ['verified']
    },
....
}

Any idea on what is going on ?

azamat-sharapov commented 8 years ago

It's most likely that <template> tag. Can you try to place verified component template right in template key of the component, rather than in HTML?

...
template: '<span title="Verified!" data-toggle="tooltip" data-placement="bottom" :class="[\'verified\', verified ? \'icomoon-checkmark-circle\' : \'\']"></span>'
...

Also, better use forum.vuejs.org.

ehben83 commented 8 years ago

Hi @azamat-sharapov, thank you for your reply. That was it !!

Ok for the forum. Didn't know about it. Thanks man.