我正在 Laravel 和 Vue.js 中开发一个项目。当我使用 Vue.js 语法时{{var_name}}，我收到一个错误，因为 Laravel 分隔符也是{{ }}. 如何更改 Vue.js 的分隔符，使其不与 Laravel 冲突？
这是我用于layout.app.blade.php的代码：
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="{{ asset('js/vue.min.js') }}"></script>
<link rel="stylesheet" href="{{asset('js/style.css') }}">
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
@if (Auth::guest())
<li><a href="{{ route('login') }}">Login</a></li>
<li><a href="{{ route('register') }}">Register</a></li>
@else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a 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_field() }}
</form>
</li>
</ul>
</li>
@endif
</ul>
</div>
</div>
</nav>
@yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/grid/grid.js') }}"></script>
</body>
</html>
以及我主页的代码：
@extends('layouts.app')
@section('content')
<link rel="stylesheet" href="{{asset('js/style.css')}}">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Dashboard</div>
<div class="panel-body">
@if (session('status'))
<div class="alert alert-success">
{{ session('status') }}
</div>
@endif
<div id="app">
<div class="container col-lg-offset-4 col-lg-4">
<br>
<div class="row">
<!-- component template -->
<script type="text/x-template" id="grid-template">
<table v-if="filteredData.length">
<thead>
<tr>
<th v-for="key in columns"
@click="sortBy(key)"
:class="{ active: sortKey == key }">
{{ key | capitalize }}
<span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'">
</span>
</th>
</tr>
</thead>
<tbody>
<tr v-for="entry in filteredData">
<td v-for="key in columns">
{{entry[key]}}
</td>
</tr>
</tbody>
</table>
<p v-else>No matches found.</p>
</script>
<!-- demo root element -->
<div id="demo">
<form id="search">
Search <input name="query" v-model="searchQuery">
</form>
<demo-grid
:data="gridData"
:columns="gridColumns"
:filter-key="searchQuery">
</demo-grid>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
<script src="{{ asset('js/grid/grid.js') }}"></script>
Nik*_*aut 11
要更改 vue.js 中的分隔符，请像这样使用
new Vue({
delimiters: ['{%', '%}'],
}
在 vuejs 文档中展开更多关于分隔符的内容
new Vue({
delimiters: ['{%', '%}'],
}
var data = {
message: 'Hello Vue.js!'
}
var demo = new Vue({
el: '#demo',
delimiters: ['{%', '%}'],
data: data
});如果您使用的是 Vue 3.x，您可以根据文档更改分隔符：
Vue.createApp({
// Delimiters changed to ES6 template string style
delimiters: ['${', '}']
})
| 归档时间： |
|
| 查看次数： |
5129 次 |
| 最近记录： |