使用 vue.js 和 laravel 查看

Question

嗨，我试着显示一些数据，但我做错了如果我把所有的东西都放在同一个文件中，例如 overview.js den 就可以了。结果应该是包含一些数据的 3 个框。

这是我的 blade.php :

@extends('index')
@section('container')
    <template>
    <div class="row" id="app">
        <div class="col-lg-3 col-sm-6" v-for="stats in statsCards">
            <stats-card>
                <div class="icon-big text-center" :class="`icon-${stats.type}`" slot="header">
                    <i :class="stats.icon"></i>
                </div>
                <div class="numbers" slot="content">
                    <p>{{stats.title}}</p>
                    {{stats.value}}
                </div>
                <div class="stats" slot="footer">
                    <i :class="stats.footerIcon"></i> {{stats.footerText}}
                </div>
            </stats-card>
        </div>
    </div>
        </template>
    <script src="resources/assets/js/app.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>
@endsection

这是我的 vue.js 文件 app.js

import StatsCard from 'js/components/UIComponents/Cards/StatsCard.vue'
new Vue({

    el: '#app',

    export default {
        components: {
            StatsCard

        },

    data() return {

        statsCards: [
            {
                type: 'warning',
                icon: 'ti-server',
                title: 'Capacity',
                value: '105GB',
                footerText: 'Updated now',
                footerIcon: 'ti-reload'
            },
            {
                type: 'success',
                icon: 'ti-wallet',
                title: 'Revenue',
                value: ',345',
                footerText: 'Last day',
                footerIcon: 'ti-calendar'
            },
            {
                type: 'danger',
                icon: 'ti-pulse',
                title: 'Errors',
                value: '23',
                footerText: 'In the last hour',
                footerIcon: 'ti-timer'
            },
            {
                type: 'info',
                icon: 'ti-twitter-alt',
                title: 'Followers',
                value: '+45',
                footerText: 'Updated now',
                footerIcon: 'ti-reload'
            }
        ]

    }
}

})

我收到此错误 使用未定义的常量统计 - 假设 'stats' 我不知道我做错了什么？感谢您的帮助。

Answer 1

Blade 尝试将 {{ }} 的内容执行为 php。你需要转义它：@{{ }}.

使用 vue.js 和 laravel 查看

view with vue.js and laravel

javascript

vue.js

laravel-5.2