VueJS 组件不使用引导表答案

【问题标题】：VueJS Components Not Working with Bootstrap TableVueJS 组件不使用引导表
【发布时间】：2023-04-02 08:45:01
【问题描述】：

在使用带有 Bootstrap 表的 VueJS 组件时，来自组件的数据根本没有出现。但是，当使用span 或简单的div 时，它显示得很好。不知道我在这里错过了什么。

    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']
            }
        }
    })

<!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>

【问题讨论】：

标签： twitter-bootstrap vue.js

【解决方案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/

请注意 plan 组件的 js 代码中的 replace: false 选项。

没有它，Vue 会将替换为模板的内容，留下没有 parent 的元素，这是无效的 HTML。

【讨论】：