v-for does not work in IE9

[kyleoliveiro]

Vue custom element:

import 'document-register-element/build/document-register-element';
import Vue from 'vue';
import vueCustomElement from 'vue-custom-element';

Vue.use(vueCustomElement);

Vue.customElement('x-combobox', {
  props: {
    options: {
      type: Array,
      default: function() {
        return [
          {label: 'Charmander', value: '1'},
          {label: 'Squirtle', value: '2'},
          {label: 'Bulbasaur', value: '3'},
          {label: 'Pikachu', value: '25'},
        ]
      }
    },
    searchable: Boolean,
    multiselect: Boolean,
    isOpen: Boolean,
    emptyText: {
      type: String,
      default: 'No results found'
    }
  },
  data: () => {
    return {
      searchString: ''
    }
  },
  computed: {
    matchedResults: function() {
      const searchString = this.searchString.toLowerCase();
      return this.options.filter(option => {
        return option.label.toLowerCase().includes(searchString);
      })
    }
  },
  template: `
    <div class="combobox">
      <div class="combobox__field" role="combobox">
        <input type="text" v-model="searchString">
      </div>

      <ul class="combobox__options">
        <li v-for="result in matchedResults"
          tabindex="0"
        >
          {{result.label}}
        </li>

        <li v-if="!matchedResults.length">
          {{emptyText}}
        </li>
      </ul>

      <div v-if="false">
        <slot></slot>
      </div>
    </div>
  `
});

Stack trace:

[Vue warn]: Error compiling template:


    <div class="combobox">
      <div class="combobox__field" role="combobox">
        <input type="text" v-model="searchString">
      </div>

      {{matchedResults}}

      <ul class="combobox__options">
        <li v-for="result in matchedResults"
          tabindex="0"
        >
          {{result.label}}
        </li>

        <li v-if="!matchedResults.length">
          {{emptyText}}
        </li>
      </ul>

      <div v-if="false">
        <slot></slot>
      </div>
    </div>
  

- invalid expression: Syntax error in

    

  Raw expression: v-for="result in matchedResults"

- invalid v-for alias "" in expression: v-for="result in matchedResults"


found in

---> <Anonymous>
       <Root> 
[Vue warn]: Error in render: "ReferenceError: 'result' is undefined"

found in

---> <Anonymous>
       <Root> 
ReferenceError: 'result' is undefined 

[karol-f]

Can You confirm that without vue-custom-element it's working?

[kyleoliveiro]

Hmm, seems like the same code is not working as a pure VueJS component in IE9 either.

I think this issue may be related: vuejs/vue#7946

EDIT: after downgrading to [email protected], the issue is resolved.

[karol-f]

Thanks for the investigation. Regards.