Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/vue.js/6.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Vue.js IE 11中的VueJS-用于<;tr>;不工作,在Edge和Chrome中工作_Vue.js_Internet Explorer 11 - Fatal编程技术网

Vue.js IE 11中的VueJS-用于<;tr>;不工作,在Edge和Chrome中工作

Vue.js IE 11中的VueJS-用于<;tr>;不工作,在Edge和Chrome中工作,vue.js,internet-explorer-11,Vue.js,Internet Explorer 11,这是在IE 11中使用Vue 2.5.16。假设app.data中有一个数据集数组,则以下内容在Chrome中运行良好(代码简化): 如果我删除模板标记,然后将v-for重复放在第一个tr中,然后删除第二个,它就会起作用。。但是我真的想要第二个 我假设这是IE11中的DOM问题差异,IE11正在将模板标记提升到表外,但不知道是否有任何非标准标记可以工作,或者如果是,哪一个可以工作。如何解决此问题?我发现解决此问题的方法是将多个tbody元素放置到位,而不是使用模板。IE 11中允许多个tbody

这是在IE 11中使用Vue 2.5.16。假设app.data中有一个
数据集
数组,则以下内容在Chrome中运行良好(代码简化):

如果我删除
模板
标记,然后将
v-for
重复放在第一个
tr
中,然后删除第二个,它就会起作用。。但是我真的想要第二个


我假设这是IE11中的DOM问题差异,IE11正在将
模板
标记提升到表外,但不知道是否有任何非标准标记可以工作,或者如果是,哪一个可以工作。如何解决此问题?

我发现解决此问题的方法是将多个
tbody
元素放置到位,而不是使用
模板。IE 11中允许多个
tbody
标记,无需IE将其移出表格,从而使
tr
标记不知道引用的循环变量

这有两种可能的副作用:

  • 你的tbody可能已经被CSS设计过了-我的是在bootstrap中-所以外观会和预期的不同,通常会有额外的边框。您可能需要使用
    !重要信息
    或至少您自己的CSS来克服此问题

  • 至少对于IE11来说,加载时间似乎较慢,但我还没有对此进行测试

结果代码:

<table>
<tbody v-for="(datarow, index) in dataset">
    <tr><td> {{ datarow }} {{ index }} </td></tr>
    <tr v-if="!(index % 50)"><td> -repeating header row- </td></tr>
</tbody>
<tbody>
    <!-- not posted above but I used another template/tr for the case of no records found; substituted with just another tbody -->
</tbody>
</table>

{{datarow}}{{index}
-重复标题行-

使用渲染函数或字符串模板。例如:有趣的Bert。我倾向于避开
渲染
,因为它不再容易被看作HTML。我确实使用字符串模板,但将来更喜欢SFC方式。那么你是说这两种方法中的任何一种都会绕过IE11的问题?我会的。测试一下。在这三种方式中,string、render和SFC哪种性能最好?主要问题是在将模板编译为渲染函数之前的某个时间点将模板渲染到DOM中。如果使用IE中不支持的
模板
,则典型的HTML呈现规则将适用,
模板
标记及其内部的所有内容将在表外呈现。但是,字符串模板和单文件组件永远不会呈现到DOM中,并且在编译到呈现函数中之前,它们不受呈现HTML规则的约束。当然,呈现函数没有问题,因为没有需要编译的内容。就表现而言;我不认为这两种方法之间存在巨大差异。我希望字符串模板和单个文件组件具有几乎相同的性能特征。渲染函数的好坏取决于您是否能够编写比编译版本更好的渲染函数。
[object Error] {description: "'datarow' is undefined" ..
<table>
<tbody v-for="(datarow, index) in dataset">
    <tr><td> {{ datarow }} {{ index }} </td></tr>
    <tr v-if="!(index % 50)"><td> -repeating header row- </td></tr>
</tbody>
<tbody>
    <!-- not posted above but I used another template/tr for the case of no records found; substituted with just another tbody -->
</tbody>
</table>