Laravel 5.8 中带有 Vue 的选项卡答案

【问题标题】：Tabs with Vue in Laravel 5.8Laravel 5.8 中带有 Vue 的选项卡
【发布时间】：2019-08-08 11:00:44
【问题描述】：

我正在使用 Laravel 并试图让标签的 Vue 实例运行，但由于某种原因，唯一显示的是标签 1 和标签 2，但没有内容，并且标签不是可点击的链接或任何东西。

这只是我调用 Vue 的方式的问题吗？它本机安装在 laravel 5.8 上，我在其他地方使用它没有问题

<div id="tabs" class="container">
<div class="tabs">
    <a v-on:click="activetab=1" v-bind:class="[ activetab === 1 ? 'active' : '' ]">Tab 1</a>
    <a v-on:click="activetab=2" v-bind:class="[ activetab === 2 ? 'active' : '' ]">Tab 2</a>
</div>

<div class="content">
    <div v-if="activetab === 1" class="tabcontent">
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Title</th>
                    <th>Type</th>
                    <th>Available At:</th>
                </tr>
            </thead>
            <tbody>
            @foreach ($result as $id => $item)
                <tr>
                    <td>{{ $id }}</td>
                    @foreach($item as $subitem)
                    @if($subitem->name == "Task Title")
                        <td>{{ $subitem->task_comment }}</td>
                        <td>{{ $subitem->task_typet_id }}</td>
                        <td>{{ $subitem->available_at }}</td>
                    @endif
                    @endforeach
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>
    <div v-if="activetab === 2" class="tabcontent">
        TEST
    </div>
</div>
</div>


<script>
export default {
    el: '#tabs',
    data: { activetab: 1 },
};
</script>

【问题讨论】：

标签： javascript laravel vue.js

【解决方案1】：

new Vue({
  el: '#tabs',
  data() {
    return {
      activetab: 1
    }
  },
})

.active {
  background-color: tomato;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="tabs" class="container">
  <div class="tabs">
    <a href="#" @click.prevent="activetab = 1" :class="[ activetab === 1 ? 'active' : '' ]">Tab 1</a>
    <a href="#" @click.prevent="activetab = 2" :class="[ activetab === 2 ? 'active' : '' ]">Tab 2</a>
  </div>

  <div class="content">
    <div v-if="activetab === 1" class="tabcontent">
      TEST 1
    </div>
    <div v-if="activetab === 2" class="tabcontent">
      TEST 2
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

看起来您的超链接设置为使用数组语法。您可能应该将其更改为：

<div class="tabs"> 
    <a v-on:click="activetab=1" v-bind:class="{ active: activetab === 1}">Tab 1</a> 
    <a v-on:click="activetab=2" v-bind:class="{ active: activetab === 2}">Tab 2</a> 
</div>

【讨论】：