Разрушение объекта в VueJS v-слоте на IE / Edge

Question

Знаете ли вы, как заставить деструктурировать объект в IE11?

Учитывая следующий код:

<list entity="ApplicationEntity" api-action="get_internal" v-slot="{item}">
    <list-column title="Name" ordering="name">
        ${ item.name }
    </list-column>
</list>

Часть v-slot="{item}" не работает на IE ( и даже на старых версиях Edge).

Чтобы это работало, я должен написать:

<list entity="ApplicationEntity" api-action="get_internal" v-slot:default="slotProps">
    <list-column title="Name" ordering="name">
        ${ slotProps.item.name }
    </list-column>
</list>

Это не имеет большого значения, но в больших шаблонах это может иметь существенное значение на удобочитаемость.

Один важный примечание: приведенный выше код является частью twig шаблона, поэтому html не является частью процесса сборки клиента.

Спасибо за вашу помощь.

РЕДАКТИРОВАТЬ

После отладки источника VueJS я видел сгенерированный код.

Если я напишите:

<test v-slot="slotProps">
    ${ slotProps.item.toto }
</test>

Сгенерированный код:

_c('test',{scopedSlots:_u([{key:"default",fn:function(slotProps){return [_v(_s(slotProps.item.toto))]}}])})

И если я напишу:

<test v-slot="{item}">
    ${ item.toto }
</test>

Это дает:

_c('test',{scopedSlots:_u([{key:"default",fn:function({item}){return [_v(_s(item.toto))]}}])})

Таким образом, разница сводится к:

function(slotProps)
// vs
function({item})

Я понимаю для IE11, но я не понимаю для края 20.

Так что если я попытаюсь:

function test(obj) {
    console.log(obj.item);
}

function test2({item}) {
    console.log(item);
}

test({item: 2});
test2({item: 2});

Я получил два раза 2 в консоли на Chrome, б но ничего о IE11 или Edge 20.

Answer 1

IE никогда не поддерживал деструктуризацию, и не существует способа просто «заставить его работать». Движок IE JavaScript не способен читать код, который использует эту функцию. Это одна из причин того, почему IE так печально иметь совместимость с современными. Если вы создаете веб-приложение для клиента, который должен использовать IE, вы не можете использовать деструктуризацию и вам придется переписать свой код для совместимости с IE.

Answer 2

Просто измените v-slot="{item}" на v-slot="{item: item}", это должно работать. Причина в том, что IE не поддерживает некоторые из новых функций ECMAScript, таких как уничтожение объектов и тот сокращение, которое вы хотели использовать.

ПРИМЕЧАНИЕ: { item: item } эквивалентно { item }, но это просто сокращение когда свойство объекта имеет то же имя, что и переменная, которую вы хотите присвоить.