Question

将VueJS组件与Bootstrap表一起使用时，组件中的数据根本不显示。但是，在使用span或简单div时，它只显示正常。不知道我在这里缺少什么。

＆＃13;

    new Vue({
        el: '#app',
        data: {
            plans: [
                {name: 'Enterprise', price: 100},
                {name: 'Pro', price: 50},
                {name: 'Beginner', price: 10},
                {name: 'Free', price: 0}
            ]
        },
        components: {
            plan: {
                template: '#plan-template',
                props: ['plan']
            }
        }
    })

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>VueJS</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="app">
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">
                Plans
            </div>
            <table class="table">
                <tbody>
                <tr v-for="plan in plans">
                    <plan :plan="plan"></plan>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<template id="plan-template">
    <td>{{ plan.name }}</td>
    <td>{{ plan.price }}</td>
</template>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>

</body>
</html>

＆＃13;

Answer 1

根据http://forum.vuejs.org/topic/2102/v-for-with-template-not-working-when-using-tr-tag/2

撰写的这篇文章Linusborg

问题是HTML只允许表中的一个非常特定的元素子集，所以当Vue使用浏览器引擎从模板字符串创建DOM元素时，浏览器会过滤掉你的组件。

解决方案是使用is=属性（http://vuejs.org/guide/components.html#is_attribute）将自身变为计划组件的占位符：

https://jsfiddle.net/Linusborg/bc2ast1j/1/

请注意计划组件的js代码中的replace：false选项。

如果没有它，Vue会用模板的内容替换它，留下没有父元素的元素，这是无效的HTML。

VueJS组件不使用Bootstrap表

1 个答案: