javascript - 无法设置 Laravel+VueJS 向我的模板呈现任何内容
问题描述
更新：如果我使用这个 app.js，它会给我返回没有刀片模板的页面，但它确实有效，不幸的是我无法将它集成到我的刀片引擎中。
import Pigeons from './components/Pigeons.vue';
const app = new Vue({
el: '#app',
components: {
Pigeons
},
render: h => h(Pigeons)
});
我已经设置 Laravel+VueJS 来获取获取 api 请求并将其显示在页面中，但我无法让它工作。我确实得到了 JSON 并且它在我的 pigeons 变量中，但我在页面中没有得到任何东西。
这是我的 Pigeon.vue 模板：
<template>
<div>
<h2>Pigeons in the racing loft</h2>
<button @click.native="greet">Greet</button>
<div class="card-content m-b-20" v-for="pigeon in pigeons" v-bind:key="pigeon.id">
<h3>{{ pigeon.id }}</h3>
</div>
</div>
</template>
<script>
export default {
data(){
return{
pigeons: [],
pigeon: {
id: '',
sex: '',
color_id: '',
pattern_id: '',
user_id: '',
loft_id: '',
country: '',
experience: '',
form: '',
fatique: ''
},
pigeon_id: '',
}
},
created(){
this.fetchPigeons();
},
methods: {
fetchPigeons(){
return fetch('api/racingloft')
.then(res => res.json())
.then(res => {
this.pigeons = res.data;
});
},
greet(){
console.log('hello');
}
}
}
</script>
这是我的 app.js：
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
import Buefy from 'buefy';
Vue.use(Buefy);
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('pigeons', require('./components/Pigeons.vue'));
const app = new Vue({
el: '#app',
});
这是我的 devtools Vue，我想我应该在这里有更多的东西，至少有更多的东西然后什么都没有。我可以设置什么错误？
这是我的 bootstrap.js 文件：
window._ = require('lodash');
window.Popper = require('popper.js').default;
/**
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
* for JavaScript based Bootstrap features such as modals and tabs. This
* code may be modified to fit the specific needs of your application.
*/
try {
window.$ = window.jQuery = require('jquery');
} catch (e) {}
/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
/**
* Next we will register the CSRF Token as a common header with Axios so that
* all outgoing HTTP requests automatically have it attached. This is just
* a simple convenience so we don't have to attach every token manually.
*/
let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
/**
* Echo exposes an expressive API for subscribing to channels and listening
* for events that are broadcast by Laravel. Echo and event broadcasting
* allows your team to easily build robust real-time web applications.
*/
// import Echo from 'laravel-echo'
// window.Pusher = require('pusher-js');
// window.Echo = new Echo({
// broadcaster: 'pusher',
// key: process.env.MIX_PUSHER_APP_KEY,
// cluster: process.env.MIX_PUSHER_APP_CLUSTER,
// encrypted: true
// });
更新（包括刀片模板）：
这就是扩展布局的刀片模板：
@extends('layouts.app')
@section('content')
<div class="columns">
<div class="column is-one-fifth">
@include('mylofts/menu')
</div>
<div class="column is-three-fifth">
<pigeons></pigeons>
</div>
<div class="column is-one-fifth">
</div>
</div>
@endsection
这就是 app.blade：
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<script>window.Laravel = { csrfToken: '{{ csrf_token() }}'}</script>
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar has-shadow" role="navigation" aria-label="main navigation">
<div class="container">
<div class="navbar-menu">
<div class="navbar-start">
<a href="/mylofts" class="navbar-item">My Lofts</a>
<a href="/myoffice" class="navbar-item">My Office</a>
<a href="#" class="navbar-item">Forum</a>
<a href="#" class="navbar-item">News</a>
<a href="#" class="navbar-item">FAQ</a>
</div>
<div class="navbar-end">
@guest
<a href="{{ route('login') }}" class="navbar-item">Login</a>
<a href="{{ route('register') }}" class="navbar-item">Register</a>
@else
<div class="dropdown is-hoverable is-right">
<div class="dropdown-trigger">
<div class="navbar-item m-r-20" aria-haspopup="true" aria-controls="dropdown-menu">
<a href="#">Hey {{Auth::user()->fname}}
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</a>
</div>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">
Profile
</a>
<a class="dropdown-item">
Settings
</a>
<a href="#" class="dropdown-item">
Bug report
</a>
<a href="#" class="dropdown-item">
Contact
</a>
<hr class="dropdown-divider">
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
@csrf
</form>
</div>
</div>
</div>
@endauth
</div>
</div>
</div>
</nav>
<main class="container">
@yield('content')
</main>
</div>
<script src="{{asset('js/app.js')}}"></script>
</body>
</html>
解决方案
推荐阅读
- python - 使用 Utf-8 将 C# 编码为 Python 的 SHA256 散列
- javascript - 在 JS 中使用选择字段过滤元素的问题
- c# - C# 想要获取网络适配器状态属性，例如 Duration
- php - 将坏 url 更改为快乐 url
- javascript - 如何终止不需要返回任何内容的 Firebase 可调用函数？
- deep-learning - 重置网络 [pytorch] 的模型参数和权重以进行交叉验证
- java - 有没有一种干净的方法可以使用 @ConfigurationProperties 从 application.properties 中提取嵌套属性？
- python-3.x - 获取用户名而不提及他们（discord.py）
- sql - 雪花中 GROUP BY CUBE 的替代品
- python - 如何使用 for 循环运行多个回归？