VueJS 组件不支持 Bootstrap Table

Question

在 Bootstrap table 中使用 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>

Answer 1

据此posthttp://forum.vuejs.org/topic/2102/v-for-with-template-not-working-when-using-tr-tag/2 by Linusborg

The problem is that HTML does only allow a very specific subset of elements inside a table, so when Vue uses the browser engine to create DOM elements from the template string, the browser filters out your component.

The solution is to turn the itself into a placeholder for your plan component with the is= attribute (http://vuejs.org/guide/components.html#is_attribute):

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

Please note the replace: falseoption in the plan component's js code.

Without it, Vue would replace the with the content of the template, leaving you with elements without a parent , which is invalid HTML.

VueJS 组件不支持 Bootstrap Table

VueJS Components Not Working with Bootstrap Table

twitter-bootstrap

vue.js