laravel - Vuejs 在 laravel 的视图中效果不佳
问题描述
我试图直接在房间的视图中使用 vuejs,但我无法让它工作。附代码
Prueba.blade.php
@extends('layouts.app')
@section('content')
<div id="demox">
<h1>Pruebas</h1>
<h3 v-text="title"></h3>
</div>
@endsection
@section('scripts')
<script>
document.addEventListener("DOMContentLoaded", function() {
const demo = new Vue({
el: '#demox',
data:function(){
return {
title: "Titulo en VUEJS"
}
},
mounted() {
console.log('cargado')
},
})
});
</script>
@endsection
布局.app.blade.php
<!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() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
@yield('styles')
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light bg-success shadow-sm">
<div class="container">
<a class="navbar-brand text-white" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
@guest
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
@if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
@endif
@else
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<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>
</li>
@endguest
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="py-4 mt-1 col-12">
@yield('botones')
</div>
<main class="py-4 mt-2 col-12">
@yield('content')
</main>
</div>
</div>
</div>
@yield('scripts')
</body>
</html>
应用程序.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.
*/
import VueSweetalert2 from 'vue-sweetalert2';
require('./bootstrap');
window.Vue = require('vue');
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
Vue.use(VueSweetalert2);
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('eliminar-registro', require('./components/EliminarRegistro.vue').default);
Vue.component('modal-encuestas', require('./components/ModalEncuestas.vue').default);
Vue.component('abrir-modal', require('./components/AbrirModal.vue').default);
Vue.component('ejemplo-prueba', require('./components/EjemploPrueba.vue').default);
/**
* 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.
*/
// const app = new Vue({
// el: '#app',
// });
错误:
app.js:42027 [Vue 警告]:“数据”选项应该是一个在组件定义中返回每个实例值的函数。
app.js:42027 [Vue 警告]:属性或方法“标题”未在实例上定义,但在渲染期间被引用。通过初始化该属性,确保此属性是反应性的,无论是在数据选项中,还是对于基于类的组件。请参阅:https ://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。* *
会发生什么?谢谢
解决方案
推荐阅读
- javascript - 开玩笑快照测试 - 忽略反应自动生成的标记
- python - Python:在大型数据框中按值选择行
- python - 如何通过 Dask 列出正在运行的进程?
- ruby-on-rails - Rails 2.3 中的自定义环境 - Fedena
- sas - 在SAS中将数值变量转换为字符
- javascript - 基于SASS中的类名计算
- android - Firebase 实例 ID,获取许多不同授权实体的令牌抛出 INVALID_SENDER
- sql-server - 将 VARBINARY 转换为 Int 或 BigInt
- python - 解析查询结果以将其插入另一个数据库
- swift - 将多个 pickerView 选定值导出为 UILabel 上的数字