我的laravel项目中的js，当我使用{{var_name}}来提取在vue js中定义的变量值时给定错误var_name未定义因为laravel delimeter也像{{}}所以任何人都建议我更好回答如何更改vue.js中的分隔符，这样我就可以轻松地使用laravel分隔符和vue js分隔符。 这是我的 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>
这是我的主页，我正在使用vue js
@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>
答案 0 :(得分：3)
要更改vue.js中的分隔符，请像这样使用
new Vue({
delimiters: ['{%', '%}'],
}
var data = {
message: 'Hello Vue.js!'
}
var demo = new Vue({
el: '#demo',
delimiters: ['{%', '%}'],
data: data
});<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="demo">
<p> {% message %} </p>
<input v-model="message">
</div>
答案 1 :(得分：1)
在Blade中使用VueJS的推荐方法是在VueJS分隔符@附加@{{ variable }}符号。
答案 2 :(得分：1)
如果使用的是Vue 3.x，则可以根据documentation更改定界符：
Vue.createApp({
// Delimiters changed to ES6 template string style
delimiters: ['${', '}']
})
答案 3 :(得分：0)
TLDR：似乎因为 Vue 3.1 旧分隔符已被弃用，我无法在源代码中内联此选项。我的目标是在 Flask 中使用 Vue 3。我已在 options.compilerOptions 中设置了 vue.config.js。
我也在 github 已关闭问题上复制了我的答案：vuejs/vue-next #1679 : Facility to change template mustaches in Vue3, delimiters no longer works
从 2 天起就开始划船了。 :))
我一遍又一遍地阅读下面的内容 https://v3.vuejs.org/api/application-config.html#compileroptions
<块引用>Important 此配置选项仅在使用完整构建 (..) 时适用。对于 vue-loader：通过 compilerOptions 加载器选项传递（打开新窗口）。另请参阅如何在 vue-cli 中配置它（打开新窗口）。
之后我在 Stackoverflow 上阅读了
在我（重新）安装在那些 Vue 3 包下面之前，只有当我通过从 stackoverflow 复制粘贴而犯了错误时。我假设它们尚未安装。
npm i --save vue@next (I assume Vue 3 is yet installed (vue@next), it's only if I copy paste vue@latest by mistake
npm install -g @vue/cli)
我为 Vue 3 安装：
npm i --save vue-loader@next
npm i --save vue-template-compiler@latest
nom i --save vue-server-renderer@latest
我在下面创建了 vue.config.js
module.exports = {
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
options.compilerOptions = {
delimiters: ['${', '}']
};
return options;
});
}
}
使用来自 App.vue 的 vue create 和我的修改：
<template>
<img alt="Vue logo" src="./assets/logo.png">
<div id="list-rendering" class="demo">
<ol>
<li v-for="todo in todos" v-bind:key="todo" >
new delimiter for flask: ${todo.text} <br>
initial vue delimiter: {{todo.text}}
</li>
</ol>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>