[英]Vue.js table component not working
I've made a table and every tbody
item is a component like this: 我做了一张桌子,每个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>
ride: 骑:
<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>
So I would expect it to look like this: 所以我希望它看起来像这样:
But it looks like this: 但它看起来像这样:
How can I fix this? 我怎样才能解决这个问题?
Quote from official docs: "Vue.js template engine is DOM-based and uses native parser that comes with the browser instead of providing a custom one." 来自官方文档的引用:“ Vue.js模板引擎基于DOM,并且使用浏览器随附的本机解析器,而不是提供自定义解析器。”
Simply put, you cannot directly use your custom tag <ride>
within <tbody>
. 简而言之,您不能直接在<tbody>
使用自定义标签<ride>
<tbody>
。 Instead you have to use <tr>
first, and inject your component using is notation. 相反,您必须先使用<tr>
,然后使用is表示法注入组件。
Try something like this: 尝试这样的事情:
<tr v-for="ride in rides" is="ride" :ride="ride"></tr>
For more details, please refer to section Template Parsing 有关更多详细信息,请参阅模板解析部分。
Hope this helps! 希望这可以帮助!
Update: One more thing: in order to let VueJS have a chance to render variable ride, you have to tell Laravel not to parse it by using @{{}} rather than {{}}, assuming your code is actually a your-view.blade.php 更新:另一件事:为了让VueJS有机会呈现可变游程,您必须告诉Laravel不要使用@ {{}}而不是{{}}来解析它,假设您的代码实际上是您的- view.blade.php
--EDIT-- - 编辑 -
When I try this: 当我尝试这个:
<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>
It looks like this: 看起来像这样:
Update: In the template you need to use <tr></tr>
too. 更新:在模板中,您也需要使用<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>
Jaimy, Jaimy,
In case you didn't fix your problem yet, please check out the next snippet. 如果您尚未解决问题,请查看下一个代码段。 I didn't use all your data / modal layouts etc but just a small example to get the table render correctly. 我没有使用所有的数据/模式布局等,而只是一个小例子来使表格正确呈现。 I wanted to add the small modification as comment on the answer of Carter, but mny reputation isn't high enough. 我想添加小的修改作为对卡特答案的评论,但是mny的声誉还不够高。
The only change to Carter's answer is this: Instead of the repeat on a tr in the tbody, add the v-for on the tbody itself. 卡特答案的唯一变化是:在tbody本身中添加v-for,而不是在tbody中的tr重复。
Vue.JS docs: In case of a inside of a you should use , as tables are allowed to have multiple tbody: 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.