Vue.js 内联模板错误答案

【问题标题】：Vue.js inline template errorVue.js 内联模板错误
【发布时间】：2017-11-27 01:00:15
【问题描述】：

我正在尝试将inline-template 与vue.js 2.0 一起使用。

我用它和Laravel blade 5.4:

<users inline-template>
    <tbody>
        @foreach($users as $user)
            <tr>
                <td>
                    {{ $user->name }}
                </td>

                <td>
                    {{ $user->last_name }}
                </td>

                <td>
                    {{ $user->created_at->diffForHumans() }}
                </td>

                @if($user->isActive())
                    <td>
                        <span class="tag is-success">Ja</span>
                    </td>
                @else
                    <td>
                        <span class="tag is-danger">Nee</span>
                    </td>
                @endif

                <td>
                    <span class="tag is-warning">Admin</span>
                </td>

                <td>
                    <i class="fa fa-eye" aria-hidden="true"></i>
                </td>
            </tr>
        @endforeach
    </tbody>
</users>

Vue 组件：

  <script>
        export default {
            created() {
                alert('test');
            }
        }
    </script>

App.js：

Vue.component('users',                          require('./components/user/Users.vue'));

但我得到如下错误：

未捕获的类型错误：无法读取未定义的属性“类型” 在 genInlineTemplate

这里可能有什么问题？有什么建议吗？

【问题讨论】：

您尝试将inline-template 与单个文件组件一起使用？我不认为那会飞。单个文件组件需要编译成渲染函数的模板。
@BertEvans 嗨，感谢您的回复。我以前像这样使用过内联模板。不知道为什么它突然抛出这个错误。如果您使用inline-template vuejs.org/v2/guide/components.html#Inline-Templates，则不需要模板
你完整的 .vue 文件是什么？只是脚本？
@BertEvans 是的。
去图；它确实有效。我...不知道你为什么要这样做，而不仅仅是为组件使用一个 javascript 文件，但你有它。我能想到的唯一导致此特定错误的可能是无法从 php 正确呈现的东西。

标签： javascript laravel vue.js

【解决方案1】：

内联模板似乎没有很好地锁定<tr> 标签。

我在文档中找不到任何解释，但通过包装 <div> 标记解决了这个问题。

<component inline-template>
     <div>
          <tr>
             <th>Something</th>
             <th>something</th>
             <th>something</th>
          </tr>
     </div>
</component>

【讨论】：