a bug with ie11 - Githubissues

thc75 commented 8 years ago

It worked sucessful with chrome and firefox,but failed with IE11. When remove the "tabletd" directive,it worked successful also.

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8"> 
  <title>A BUG with IE11</title>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/1.0.24/vue.js"></script>
 </head>
 <body>
  <table id="demo" border="1">
      <tr v-for="entry in gridData">
        <!-- It worked sucessful with chrome and firefox,but failed with IE11.
            When remove the "tabletd" directive,it worked successful also. 
        -->
        <td v-tabletd="{entry:entry}" v-for="key in gridColumns">
          {{entry[key]}}
        </td>
      </tr>   
  </table>

  <script type="text/javascript">
Vue.directive('tabletd',function (value) {
    var entry = value.entry;
    var el = this.el;
    el.innerHTML = '<i>'+entry.name+'</i>';
});

new Vue({
  el: '#demo',
  data: {
    gridColumns: ['name', 'power'],
    gridData: [
      { name: 'Chuck Norris', power: Infinity },
      { name: 'Bruce Lee', power: 9000 },
      { name: 'Jackie Chan', power: 7000 },
      { name: 'Jet Li', power: 8000 }
    ]
  }
})
  </script>
 </body>
</html>

thc75 commented 8 years ago

OK,I got it! Remove the "{{entry[key]}}",and it will work successful.

simplesmiler commented 8 years ago

Well you are trying to write to the element both from the component with {{ entry[key] }} and from directive with el.innerHTML = '<i>' + entry.name + '</i>'. Of course there will be an issue :wink:

vuejs / vue

a bug with ie11 #3178