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

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

简而言之，您无法在<ride>中直接使用自定义代码<tbody>。相反，您必须先使用<tr>，然后使用is notation注入组件。

尝试这样的事情：

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

有关详细信息，请参阅Template Parsing

部分

希望这有帮助！

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

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

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

Vue.JS文档：如果你应该使用一个内部，因为表允许有多个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>

Vue.js表组件无法正常工作

2 个答案: