Просмотр с помощью vue.js и laravel

Привет, я пытаюсь показать некоторые данные, но я делаю что-то не так если я помещу все в один и тот же файл, например, 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: '$1,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'
            }
        ]

    }
}

})

Я получаю эту ошибку Использование неопределенной постоянной статистики - предполагаемая "статистика" я не знаю, что я делаю не так, любая идея? Спасибо за вашу помощь.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
27
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Blade пытается выполнить содержимое {{ }} как php. Вам нужно избежать этого: @{{ }}.

Вы сбежали от них всех? Кроме того, вы загружаете старую версию Vue.

Ben 22.03.2018 12:48

Другие вопросы по теме