[英]view with vue.js and laravel
嗨,我尝试显示一些数据,但是如果我将所有内容放到同一个文件中(例如,overview.js),我做错了,那会没事的。 结果应该是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'
}
]
}
}
})
我收到此错误使用未定义的常量统计信息-假定为“统计信息”,我不知道自己在搞错什么主意吗? 谢谢你的帮助。
刀片尝试将{{ }}
的内容作为php执行。 您需要对其进行转义: @{{ }}
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.