Injecting Browser Prefixes For Grid Not Working With Vue

I've blown an afternoon on this already and I'm stumped. I clock that IE11 doesn't support grid-template and that I need to use -ms-grid-columns and -ms-grid-rows instead but I'm t

Solution 1:

It looks like you shouldn't actually include the vendor prefixes and that Vue will add them automatically. See documentation: Auto-prefixing.

Consider this screen shot of the IE11 browser tools running the code below:

const foo = {
  methods: {
    gridTemplate: function() {
      return {
        "display": "-ms-grid",
        "grid-columns": _.fill(Array(4), "1fr").join(" "),
        "grid-rows": _.fill(Array(4), "1fr").join(" "),
        "grid-gap": "3px"
      }
    }
  }
}

const app = newVue({
  el: "#app",
  components: {
    foo: foo
  }
});

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script><divid="app"><fooinline-template><div:style="gridTemplate()"></div></foo></div>