Vue.js表组件不起作用

Question

我做了一张桌子，每个tbody项目都是这样的组件：

<div class="panel">
    <table class="table">
    <thead>
        <tr>
            <th>Door</th>
            <th>Van</th>
            <th>Naar</th>
            <th>Type</th>
            <th>Datum</th>
        </tr>
    </thead>
    <tbody>
       <ride v-for="ride in rides" :ride="ride"></ride>
    </tbody>
  </table>
</div>

骑：

<template>
<show-ride-modal :ride="ride"></show-ride-modal>
<tr>
    <td>{{ ride.user.name }}</td>
    <td>{{ ride.location.from }}</td>
    <td>{{ ride.location.to }}</td>
    <td>{{ ride.type.name }}</td>
    <td>{{ ride.date }}</td>
    <td>
        <a @click="show" class="btn-show">Bekijk</a>
        <a v-link="{ name: 'ritten' }" class="btn-edit">Bewerk</a>
        <a v-link="{ name: 'ritten' }" class="btn-delete">Verwijder</a></td>
</tr>                   
</template>

所以我希望它看起来像这样：

但它看起来像这样：

我怎样才能解决这个问题？

Answer 1

来自官方文档的引用：“ Vue.js模板引擎基于DOM，并且使用浏览器随附的本机解析器，而不是提供自定义解析器。”

简而言之，您不能直接在<tbody>使用自定义标签<ride> <tbody> 。 相反，您必须先使用<tr> ，然后使用is表示法注入组件。

尝试这样的事情：

<tr v-for="ride in rides" is="ride" :ride="ride"></tr>

有关更多详细信息，请参阅模板解析部分。

希望这可以帮助！

---

更新：另一件事：为了让VueJS有机会呈现可变游程，您必须告诉Laravel不要使用@ {{}}而不是{{}}来解析它，假设您的代码实际上是您的- view.blade.php

- 编辑 -

当我尝试这个：

<table class="table">
<thead>
    <tr>
        <th>Door</th>
        <th>Van</th>
        <th>Naar</th>
        <th>Type</th>
        <th>Datum</th>
    </tr>
</thead>
<tbody>
   <tr v-for="ride in rides" is="ride" :ride="ride"></tr>
</tbody>

<template>
        <td>{{ ride.user.name }}</td>
        <td>{{ ride.location.from }}</td>
        <td>{{ ride.location.to }}</td>
        <td>{{ ride.type.name }}</td>
        <td>{{ ride.date }}</td>
        <td>
            <a @click="show" class="btn-show">Bekijk</a>
            <a v-link="{ name: 'ritten' }" class="btn-edit">Bewerk</a>
            <a v-link="{ name: 'ritten' }" class="btn-delete">Verwijder</a>
        </td>               
</template>

看起来像这样：

---

更新：在模板中，您也需要使用<tr></tr> 。

<template>
    <tr>
        <td>{{ ride.user.name }}</td>
        <td>{{ ride.location.from }}</td>
        <td>{{ ride.location.to }}</td>
        <td>{{ ride.type.name }}</td>
        <td>{{ ride.date }}</td>
        <td>
            <a @click="show" class="btn-show">Bekijk</a>
            <a v-link="{ name: 'ritten' }" class="btn-edit">Bewerk</a>
            <a v-link="{ name: 'ritten' }" class="btn-delete">Verwijder</a>
        </td>
    </tr>               
</template>

Answer 2

Jaimy，

如果您尚未解决问题，请查看下一个代码段。 我没有使用所有的数据/模式布局等，而只是一个小例子来使表格正确呈现。 我想添加小的修改作为对卡特答案的评论，但是mny的声誉还不够高。

卡特答案的唯一变化是：在tbody本身中添加v-for，而不是在tbody中的tr重复。

Vue.JS docs：如果在a内部，则应使用，因为表允许具有多个tbody：

 var ride = Vue.extend({ props: ['ride'], template: `<tr> <td>{{ ride.user.name }}</td> <td>{{ ride.location.from }}</td> <td>{{ ride.location.to }}</td> <td>{{ ride.type.name }}</td> <td>{{ ride.date }}</td> <td><a @click="show" class="btn-show">Bekijk</a></td> <td><a v-link="{ name: 'ritten' }" class="btn-edit">Bewerk</a></td> <td><a v-link="{ name: 'ritten' }" class="btn-delete">Verwijder</a></td> </tr>` }) Vue.component('ride', ride) new Vue({ el: 'app', data: function () { return { rides: [ { user: { name: 'Jaimy' }, location: { from: 'Van', to: 'Naar' }, type: { name: 'Type' }, date: 'datum' }, { user: { name: 'Jaimy 2' }, location: { from: 'Van 2', to: 'Naar 2' }, type: { name: 'Type 2' }, date: 'datum 2' } ] } } }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <app> <div class="panel"> <table class="table"> <thead> <tr> <th>Door</th> <th>Van</th> <th>Naar</th> <th>Type</th> <th>Datum</th> <th></th> <th></th> <th></th> </tr> </thead> <tbody v-for="ride in rides" is="ride" :ride="ride"> </tbody> </table> </div> </app>