Vue.js 表格组件不起作用

Posted 2023-02-22

【中文标题】Vue.js 表格组件不起作用

【英文标题】：Vue.js table component not working

【发布时间】：2016-12-10 04:29:52

【问题描述】：

我制作了一张表格，每个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>

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

但它看起来像这样：

我该如何解决这个问题？

【参考方案1】：

杰米，

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

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

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

【讨论】：

嘿，感谢伟大的 sn-p！当我在 jsfiddle 中自己制作一个时，它正在工作。但由于某种原因，在我的项目中它不起作用。 （我使用版本 ^1.0.26）。它删除了表格 html。请参阅编辑 2 了解页面源结果。

杰米我似乎找不到你的编辑。上面的示例也使用 1.0.26，所以我认为您项目中的其他内容存在冲突

或许你可以看看。我已经把它放在github上：github.com/jamie2323/kmstand我真的很感激。

这是文件：github.com/jamie2323/kmstand/blob/master/resources/assets/js/…

杰米只是为了让你知道。我会调查一下，但我现在时间有点短，所以如果其他人对此有任何想法，请看一下。如果没病，明天试试看。

【参考方案2】：

引用官方文档：“Vue.js 模板引擎是基于 DOM 的，使用浏览器自带的原生解析器，而不是提供自定义解析器。”

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

试试这样的：

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

更多详情请参考Template Parsing部分

希望这会有所帮助！

---

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

【讨论】：

感谢您回答我的问题。我已将文档变红，但无论我尝试什么，它都不起作用。

我可以看看你在做什么吗？只需更新上面的代码。

因为你用 laravel 标记你的问题，我假设你使用 Laravel 刀片模板系统。所以请注意，您必须告诉 Laravel 不要解析您的 javascript 变量 Ride，这意味着您必须在模板中使用 @ 而不是 ，例如 @ride.user.name。

请看我的编辑。我正在 Laravel 中制作一个 api。所以我不使用刀片！

很公平。我想你快到了。在模板中你也需要使用<tr></tr>。我也更改了您的编辑，请参见上面的代码。