Html Vue.js表组件不工作

我做了一张表，每个

t主体
项都是这样的组件：

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

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


门
厢式货车
纳尔
类型
资料

骑乘：

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


{{ride.user.name}
{{ride.location.from}
{{ride.location.to}
{{ride.type.name}
{{ride.date}

但看起来是这样的：

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

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


如何修复此问题？
引用官方文档：“Vue.js模板引擎基于DOM，使用浏览器附带的本机解析器，而不是提供自定义解析器。”

简单地说，您不能在
中直接使用自定义标记
。相反，您必须首先使用
，并使用is符号注入组件

试着这样做：

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

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



有关更多详细信息，请参阅第节

希望这有帮助


更新：
还有一件事：为了让VueJS有机会呈现变量ride，您必须告诉Laravel不要使用{{}而不是{}来解析它，假设您的代码实际上是your-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>


门
厢式货车
纳尔
类型
资料



{{ride.user.name}
{{ride.location.from}
{{ride.location.to}
{{ride.type.name}
{{ride.date}


更新：
在模板中，您也需要使用

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


{{ride.user.name}
{{ride.location.from}
{{ride.location.to}
{{ride.type.name}
{{ride.date}
贝基克
比沃克
维尔维德
杰米

如果您还没有解决问题，请查看下一个代码片段。我没有使用你所有的数据/模式布局等，只是一个小例子，以获得正确的表渲染。我想在对卡特回答的评论中加上一点小小的修改，但我的声誉还不够高

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

Vue.JS文档：
如果是a的内部，则应使用，因为表格允许有多个tbody：


var ride=Vue.extend({
道具：[“骑行”]，
模板：`
{{ride.user.name}
{{ride.location.from}
{{ride.location.to}
{{ride.type.name}
{{ride.date}
贝基克
比沃克
维尔维德
`
})
Vue.组件（“骑乘”，骑乘）
新Vue({
el:“应用程序”，
数据：函数（）{
返回{
乘车：[
{
用户：{
姓名：“杰米”
},
地点：{
来自：“Van”，
致：“纳尔”
},
类型：{
名称：“类型”
},
日期：“基准”
},
{
用户：{
姓名：“杰米2”
},
地点：{
来自：“Van 2”，
致：“Naar 2”
},
类型：{
名称：“类型2”
},
日期：“基准2”
}
]
}
}
})

门
厢式货车
纳尔
类型
资料
谢谢你回答我的问题。我已经把文件弄红了，但不管我怎么做，它都不起作用。我能看看你在忙什么吗？只要更新上面的代码。既然你用laravel标记你的问题，我假设你使用laravel刀片模板系统。请注意，您必须告诉Laravel不要解析JavaScript变量ride，这意味着您必须在模板中使用{{{}而不是{{}，如{{ride.user.name}。请参阅我的编辑。我正在拉威尔制作一个api。所以我不使用刀片！很公平，我想你就快到了。在模板中，您也需要使用
。我也修改了你的编辑，请看上面的代码。嘿，谢谢你的精彩片段！当我在jsfiddle中制作自己的一个时，它就工作了。但在我的项目中，由于某种原因，它不起作用。（我使用版本^1.0.26）。它删除了html表。页面源结果请参见编辑2。jamie我似乎找不到您的编辑。上面的例子也使用了1.0.26，因此我认为您的项目中的其他内容存在冲突，也许您可以看看。我已经把它放在github上了：我真的很感激。这是文件：Jamie，只是想让你知道。我会调查的，但我现在时间有点紧，所以如果其他人对此有想法，请看一看。如果不是的话，我明天就去看看。