CODEWITHSUNDEEP
twitter-bootstrapvue.js
mmik
mmik

Reputation: 5961

VueJS Components Not Working with Bootstrap Table

While using the VueJS components with Bootstrap table, the data from the components not appearing at all. However, when using the span or a simple div, it just shows fine. Not sure what am I missing here.

    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>

Upvotes: 1

Views: 2593

Answers (1)

GONG
GONG

Reputation: 4026

According to this post http://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.

Upvotes: 2

Related Questions