如何将vue变量放入laravel括号中
在Laravel中，可以通过以下步骤将Vue变量放入括号中：
- 首先，在Laravel项目中安装Vue.js。可以使用npm或者yarn来安装Vue.js，具体安装步骤可以参考Vue.js官方文档。
- 在Laravel项目中创建一个Vue组件，可以使用Vue CLI来创建一个新的Vue组件。在Vue组件中，可以定义需要传递给Laravel视图的变量。
- 在Laravel视图中引入Vue组件。可以使用
<script>标签来引入Vue组件的JavaScript文件，并在需要的地方使用Vue组件。 - 在Laravel视图中使用括号将Vue变量包裹起来。可以使用双花括号
{{ }}来输出Vue变量的值。例如，如果Vue组件中定义了一个名为message的变量，可以在Laravel视图中使用{{ message }}来输出该变量的值。 - 在Laravel控制器中将Vue变量传递给视图。可以在Laravel控制器中使用
with方法将Vue变量传递给视图。例如，可以使用return view('example')->with('message', $message)将名为message的Vue变量传递给名为example的视图。
总结起来，将Vue变量放入Laravel括号中的步骤如下：
- 安装Vue.js并创建Vue组件。
- 在Laravel视图中引入Vue组件。
- 使用括号将Vue变量包裹起来。
- 在Laravel控制器中将Vue变量传递给视图。
请注意，以上步骤是一种常见的做法，具体实现方式可能因项目结构和需求而有所不同。对于更详细的信息和示例代码，建议参考Laravel和Vue.js的官方文档以及相关教程。
相关·内容
2回答
我有一组组件，一些组件通过@include('my-sub-component')包括其他组件
问题是，当我想使用vue时，我必须将整个组件放在模板标记中的vue.js文件中。
但是在模板中，我想使用@include，这样我就可以包含一些子组件。这不管用。
如何将刀片组件包含在vue组件中？
浏览 8提问于2017-11-23得票数 3
回答已采纳
我有一个拉拉维尔安装，并希望使用vuejs的前端。所以，我运行npm安装-保存vuex和所有的安装是成功的。
在app.js ( /resources/js/app.js )中，我导入了存储文件并将其添加到vue实例对象中：
import store from './store/store'
const app = new Vue({
el: '#app',
router,
store
});
在store.js内部，我有以下内容：
import Vue from 'vue'
import Vuex from '
浏览 2提问于2019-07-04得票数 0
回答已采纳
注意:如果您未能在代码中发现任何缺陷或没有出现控制台日志错误，请参阅对建议答案的注释。
任何人有过烤面包的经验，请在以下方面提供帮助。我遵守上的指示。似乎在下面的代码之后，js被正确地读取(我猜)
import VueToast from 'vue-toast'
这是我第一次将css导入Vue组件。做了一些研究，我想我有vue-加载器，它应该包括vue风格的加载器作为提到的 (如果我错了的话是正确的)，我使用以下代码导入vue-toastr css
import '!!vue-style-loader!css-loader!vue-toast/dist/vue-
浏览 2提问于2017-02-12得票数 3
回答已采纳
我正在尝试让我的第一个Vue代码在Laravel中工作，但是Vue似乎不适合我，我真的不知道为什么。
Vue掌握课程这个周末是免费的-它们通常比我负担得起更多-所以我想利用这个机会来正确地学习Vue。不幸的是，我在Vue Basics课程的第一节课是行不通的。
这是我的密码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Shopping List App</title>
&
浏览 8提问于2020-03-14得票数 1
回答已采纳
1回答
Laravel和Vue模板错误
、、、、
我第一次在Laravel5.3中使用vue，目前我可以在vue中使用Jquery请求来获取数据，但是我在显示它时遇到了一些困难。这是我目前的脚本:这是我的观点：
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu" id="messagesArea">
<messages></messages>
</ul>
</li>
<!-- Further Do
浏览 0提问于2016-12-06得票数 0
回答已采纳
4回答
我开始了解Vue.js了。我想知道如何将刀片变量传递到Vue.js？
喜欢
return view('user.profile', ['locations' => $allLocations);
我可以通过Vue.js操纵它吗？
因为我正计划实现一个动态下拉列表。实际上，有两次跌落。因此，无论用户在第一个下拉列表上选择什么，第二个下拉列表将只显示特定的选项。
我已经尝试过在1之前实现它。)隐藏元素，通过Javascript或2检索元素。)在页面加载后使用HTTP请求初始化元素，但是我发现这个方法有点麻烦，或者有点占用资源。除了上面提到的，还有其他实
浏览 3提问于2018-03-21得票数 1
回答已采纳
我有一个web应用程序，使用Django作为后端，Vue.js作为前端。在单元格中，这是每个行的一个按钮，它应该在单击后获取该行的详细信息。因此，我希望将Vue.js中某一行的一些变量作为参数传递给Vue.js方法。
但是我做不到，当我尝试点击按钮时，它总是提交表单，但是我已经添加了type=“按钮”。
<tbody>
<tr v-for="(row, index) in filteredRows" :key="`isbn-${index}`">
&l
浏览 4提问于2021-07-06得票数 2
回答已采纳
我想将VueJS添加到基于Laravel的多页面应用程序中。
好吧- Vue提供了很多，但我真的很想继续使用Laravel的路由机制，只添加VueJS来增强我的项目。
所以我的问题是:由于Laravel附带了包含基本Vue-scaffolding的app.js，我不能为不同的页面添加不同的行为：
resources/assets/js/app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require(&
浏览 1提问于2018-09-15得票数 0
1回答
我正在尝试用vueJS和laravel创建一个表单。现在我可以用组件vue创建表单，但我的问题是，我不知道如何将返回给控制器中查询的信息传递给组件vue。
在带{{$user}}的刀片中，我可以，但在vueJS中，我不知道怎么做。
我对控制台中的属性也有问题。
非常感谢你帮我
控制台中的
[Vue warn]: Property or method "direccion" is not defined on the instance but referenced during render. Make sure that this property is reactiv
浏览 2提问于2020-10-20得票数 1
回答已采纳
2回答
我在Laravel4.2中工作，我想在我的应用程序中实现Vue.js。当我在刀片中放置一些测试代码时，它只显示“使用未定义的常量消息-假设的‘message’”，我知道laravel读取{message}类php代码，但是您知道如何将vue.js添加到我的刀片中吗？谢谢你帮忙。这是代码
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<script>
new Vue({
浏览 7提问于2017-07-06得票数 0
回答已采纳
我正在尝试将代码从我的vue文件分割成一些只在特定路由中使用的较小的文件。
例如，我有一个mobile.vue组件，它只在用户使用移动设备时才会出现。
最初，如果我不拆分代码，这就是我如何将vue component转换成app.js的方法
require('./bootstrap');///typical for laravel to have a bootstrap.js for other pages.
window.Vue = require('vue');
Vue.component('v-mobile', require('
浏览 0提问于2018-07-26得票数 3
我是Laravel和Vue的新手，需要帮助我实现Vue-Multiselect。
我不知道如何将实际的选项传递给select。
我的vue档案：
<template>
<div class="dropdown">
<multiselect
:selected.sync="selected"
:show-labels="false"
:options="options"
浏览 0提问于2016-09-30得票数 4
回答已采纳
在Makefile中定义了一个print函数，它以打印文本为参数，然后打印它。我的问题是，如何将逗号字符作为文本部分打印出来？例如，下面是相关的makefile部分，其中逗号不可打印。
print = echo '$(1)'
help:
@$(call print, He lives in Paris, does not he?)
现在，如果运行makefile，如：
$ make help
印出来
$ He lives in Paris
而不是
$ He lives in Paris, does not he?
我知道在makefile逗号中使用的参数
浏览 8提问于2019-04-23得票数 8
回答已采纳
1回答
我刚刚将Vue.js从2.5.17版本更新到了2.5.22版本，它破坏了我的一些代码：
PUG
ssh-pre(language="html-vue" v-pre).
<div v-for="i in 3" :key="i">{{ i }}</div>
在Vue版本2.5.17中，它调用了我的组件ssh-pre，现在在2.5.22版本中它不再调用了(看起来像修复，根据文档，它应该是这样的： )。
那么现在，我如何才能调用我的组件，而不需要解释胡子，也不需要在ssh-pre 中添加一个
浏览 0提问于2019-01-23得票数 0
1回答
当涉及到Laravel和Vue时，我遇到了验证方面的问题
我的控制器有这样的逻辑。
$this->validate($request, [
"name" => ["required", "min:3"]
]);
然而，Vue只能识别两个验证中的一个。例如，如果文本字段的长度不超过3个字符，Vue仍然允许全部通过，声明名称字段仍然是必需的。
在前端显示的唯一错误是"required“规则，没有"min:3”。
有什么建议吗？或者如果有人能通过VueJS/Laravel验证带我找到一个好的源码，那就太棒了，
提
浏览 19提问于2021-03-08得票数 0
如何将PHP变量的值传递给Laravel刀片文件中的Vue组件？
在我的示例中，我有一个内联模板客户端详细信息，我从Laravel获得了这个视图，所以现在我想将url /client/1附带的id传递给我的Vue实例。
我的组件由Laravel加载，如下所示：
<client-details inline-template>
<div id="client-details" class="">
My HTML stuff
</div>
</client-details>
并由下列
浏览 13提问于2017-01-07得票数 30
回答已采纳
如何将数据从Laravel传递到Vue.js组件v？
我尝试了以下代码：
<my-component
v-for="(event, eventIndex) in {{ $data['events'] }}">
</my-component>
但它会返回：
使用v-for呈现的组件列表应该有显式的键。
浏览 0提问于2018-03-01得票数 0
回答已采纳
我用来建立我的幼体。
当我在幼虫中调用这些文件时，我会得到一个空白页。
我的文件结构如下：
app.js文件的内容如下：
import Vue from "vue"
import App from "./components/App.vue"
import store from "./components/store"
import VeeValidate from "vee-validate"
Vue.use(VeeValidate);
import "./components/directives"
浏览 5提问于2019-10-22得票数 0
我正在做一个项目，有人能告诉我如何将vue.js与laravel 5.6集成在一起吗?我知道如何将html文件与laravel集成，但我对vue.js一无所知，如果你能解释一下文件夹结构的一些小细节，我会很感激的。谢谢
浏览 2提问于2018-09-04得票数 2
我有中间件，可以检查用户状态(如果是在线的还是离线的)，如果我使用刀片，它是可以工作的，但是由于我使用的是vue.js components，所以我不知道如何将它传递给组件。
在刀刃上我可以用：
@if($user->isOnline)
Online
@else
Offline
@endif
这是我的user模型：
public function isOnline()
{
return Cache::has('user-is-online-' . $this->id);
}
现在我的问题是，如何在组件中使用isOnline ？
PS:如果你需要我分享的代码，请告
浏览 0提问于2018-09-22得票数 0
1回答
好吧，我有一个Laravel Vue装置。
Package.json
{
"devDependencies": {
"axios": "^0.15.3",
"babel-preset-es2015": "^6.24.1",
"bootstrap": "4.0.0-beta",
"cross-env": "^3.2.3",
"jquery": "^3.1.1",
"
浏览 0提问于2019-04-29得票数 1
回答已采纳
在package.json中，我看到行："vue"："^2.1.10"，但在执行npm更新时，我看到: vue@2.5.13。
我的Laravel应用程序中安装了哪个Vue版本？有没有其他的方式来看它？
如果Vue仍在2.1.10上，您如何将Vue更新到2.5.13版本？
浏览 17提问于2017-12-30得票数 4
回答已采纳
1回答
我有一个*.blade.php文件，它向API发送一个GET请求。这将返回一个*.xml文件，我能够将该文件解析为要在*.blade.php文件中使用的数据。如何将此信息传递到应用程序中的*.vue文件？我尝试过将数据作为支柱传递，但它似乎不能正常工作。有处理这类任务的最佳实践吗？
home.blade.php
<?php
@extends('layouts.app')
// <PHP API REQUEST HERE>
$example = data stored from XML file;
?>
@section('content&
浏览 3提问于2017-04-26得票数 0
回答已采纳
2回答
将刀片文件用于模板？
、、、、
我有一个刀片文件，我希望将其用作vue组件。因此，在.vue文件中，我通常会将其编码为：
<template>
....
</tempalte>
....rest of vue file
但是如何将刀片文件用于模板？
浏览 3提问于2017-03-29得票数 0
我一直在寻找解决方案和参考我的问题。我对通过外部按钮调用VueJs组件中的vue方法(ex: createItem() {.})感到困惑。
我的"app.js“
// ..\resources\assets\js\app.js
require('./bootstrap');
window.Vue = require('vue');
window.Vue.prototype.$http = axios;
Vue.component('sample', require('./components/SampleComponent.v
浏览 0提问于2018-05-03得票数 1
回答已采纳
2回答
我最近开始学习vue.js (来自棱角2+)，我看了一些教程，一切似乎都进行得很顺利。
和以前一样，在我完成了教程之后，我为自己创建了一个小应用程序，以确保我知道我在做什么。但我似乎真的在和Vue混在一起。
到目前为止，这个应用程序非常简单。一个用户发布一个故事，故事有评论.就这么简单
我已经到了我希望用户能够编辑那里的评论，但它似乎我不知道如何做到这一点。我希望这样，当用户单击“编辑”按钮时，注释会更改为文本区域或某种类型的输入。
在这一点上，我根本不习惯于在项目中使用。所有的页面都是用刀片渲染的。
我想弄清楚你是怎么利用它的？所以我有以下问题
您是否打算使用多个vue组件，在刀片中循环
浏览 6提问于2020-05-30得票数 0
回答已采纳
我已经看过一些教程，说明如何将Vue.js包含到Laravel项目中。据我所见，通过创建模板并将其导入刀片文件，教程正在使用Vue.js。将Vue javascript文件直接包含到刀片文件中并像这样直接使用Vue有什么“错误”吗？换句话说，只是使用：
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
在刀片文件里我想用Vue。
这样做的原因是我只想让Vue.js取代Jquery在应用程序中所做的一些工作。我也一直在考虑使用React。但这似乎与Vue
浏览 2提问于2018-08-09得票数 0
回答已采纳
5回答
我有一个表单，用户只应该在文本区域内键入文本：
<form action="#" v-on:submit="postStatus">{{-- Name of the method in Vue.js --}}
<div class="form-group">
<textarea class="form-control" rows="5" maxlength="140" aut
浏览 2提问于2016-10-08得票数 37
回答已采纳
1回答
我最近从Vue-CLI切换到laravel-mix，SCSS变量的用法在Vue-CLI中工作得很好，但在我切换到laravel-mix之后，现在似乎完全不起作用了。
Vue-CLI只是为我处理了所有的事情，我觉得我必须配置一些东西来让变量在laravel-mix中工作。
这是我尝试过的(也是在Vue-CLI中起作用的)：
// vue component
import variables from "@/styles/variables.scss";
// ...
data() {
return {
variables
}
}
methods:
浏览 1提问于2021-06-25得票数 0
1回答
更多地了解Laravel，我想知道从我的控制器把我的数据传递到我的Vue组件的最好方法是什么？
我已经理解了如何将它作为一个道具来传递，然而，我似乎无法让它呈现出我想要的方式。我在Vue组件中的道具是。我的控制器在这里：
{
public function fetch() {
$data = Http::get('https://jsonplaceholder.typicode.com/albums')->json();
return view('welcome', ['data' => $d
浏览 9提问于2022-04-09得票数 0
如何将安装/导入/包括到laravel项目中？我是Vue的新手，我知道如何在Vue JS应用程序中安装，但是如何添加laravel呢？
app.scss
// Fonts
@import url("https://fonts.googleapis.com/css?family=Nunito");
// Variables
@import "variables";
// Bootstrap
@import "~bootstrap/scss/bootstrap";
@import "node_modules/bootstrap/scss
浏览 0提问于2019-04-30得票数 10
回答已采纳
1回答
我有一个laravel + vue应用程序。身份验证完全使用laravel Auth和刀片进行管理。现在，我正在系统中构建一个vue应用程序。这个vue应用程序集成了vue-router和vuex。我正在使用Api控制器来处理来自我的vue应用程序的任何http请求。
app.js
Vue.use(VueRouter);
global.router = new VueRouter({
base: window.location.pathname.replace(/^(\/c\/[^\/]+).*/i,'$1'),
routes: routes
});
new
浏览 1提问于2018-06-24得票数 2
我正在创建一个在前端使用laravel后端和vue的应用程序。在web.php文件中，我需要3个单独的SPA条目路由(每个路由分别用于访客用户、注册用户和管理员用户)，如下所示：
Route::get('/', function() {
return view('guest.index');
});
Route::any('/admin/{any}', function () {
return view('dashboard.admin.dashboard');
})->where(['any
浏览 0提问于2018-04-05得票数 0
2回答
我刚开始使用Vue.js，我正在努力学习如何在我的Laravel应用程序中使用vue-star评级来实现食谱的评分系统。我想学习的第一件事是如何构建组件，然后将它们包含在我的刀片视图中。我已经在这里遇到麻烦了。尝试包括ExampleComponent.vue随拉拉维尔开箱，但我不明白我是如何将它包括在我的刀片文件。我的刀片文件的顶部是这样的
叶片视图
<div class="col-sm-6">
<div class="container recipeDesc">
&
浏览 0提问于2019-04-27得票数 0
如何将HTML绑定到Vue组件属性？
在PHP脚本中，我有：
$html = '<div>some text</div>';
$box = "<box_includes
html_text='$html'
></box_includes>";
在我的vue模板中：
<template id="template_box_includes">
{{ html_text }}
</template>
但在我的浏览器中，我看到了所有的文本，包括标签，它被识别为文本：
浏览 0提问于2016-05-09得票数 7
回答已采纳
2回答
我在理解如何在Laravel中将Vue变量与Blade模板相结合时遇到了麻烦。
这是可行的：
<ul id="media" v-if="files !== null">
<li v-for="item in files">
@{{ item.file }}
</li>
</ul>
这不起作用：
<ul id="media" v-if="files !== null">
<li v-for="item i
浏览 0提问于2019-03-16得票数 0
所以在我的laravel应用程序中，我们有一个网址
http://mywebsite.in/wfengine/search/
现在我想使用laravel路由器在上面的链接上工作，但似乎什么都没有发生。
Router.js
import VueRouter from 'vue-router';
let routes = [
{
path:'/filters',
componenet: require('./views/filter')
}
];
export default new VueRou
浏览 4提问于2017-06-12得票数 1
1回答
我有一个blade.php的laravel (+vue.js)导航栏。我希望在这个导航栏变量中有{{xyz}}，当我转到另一个页面时，我可以在Vue.js或类似的东西中设置文本。你能帮帮我吗?
代码：
vue:
data() {
return {
title: 'test',
}
},
and blade:
<nav class="navbar">
<div class="navbar-inner">
浏览 0提问于2017-08-31得票数 0
1回答
我正在创建一个使用Vue路由器的单一页面应用程序(SPA)，因此它主要由Vue组件和一个刀片组件组成，该组件使用
<router-view></router-view>
我想知道如何传递在控制器中计算出来的数据，并将其传递给Vue组件。我目前的做法是公开额外的API端点，例如在我的控制器中：
public function countUsers()
{
$userCount = DB::table('users')->count();
return $userCount;
}
然后在api.php中：
Route::
浏览 1提问于2019-05-21得票数 1
回答已采纳
我正在使用Laravel和VueJS创建一个简单的登录表单。
因为我是在.vue文件中设计登录表单的模板，所以@csrf根本不起作用。
那么，如何在.vue文件中的任何形式中添加csrf-token (@csrf)或任何刀片语法？
Login.vue
<template>
<div class="app">
<form action="/login" method="post">
@csrf <!-- How can I make this work --
浏览 1提问于2018-04-05得票数 0
4回答
我安装了VueJS2，以便在拉拉中使用。从一个简单的测试设置开始，这是app.blade.php
<!DOCTYPE html>
<html>
<head>
<script scr="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="widt
浏览 5提问于2016-12-18得票数 6
我知道，我也见过这个问题
但我试过在评论中找到解决方案，但效果不佳。
我有我的Laravel-echo-server.json
{
"authHost": "https://mysite.it",
"authEndpoint": "/broadcasting/auth",
"clients": [],
"database": "redis",
"databaseConfig": {
"redis": {
浏览 10提问于2020-10-16得票数 1
我正试图用Vue安装Laravel，但由于某种原因，目前还没有任何渲染。
这是我的代码：
主布局文件(main.blade.php)
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="
浏览 0提问于2019-02-11得票数 1
我是Vuejs的新手。我有下面的代码，我得到了一个错误。我正在尝试将一个var传递到vue文件中。
我做错什么了？我怎样才能做到这一点？
App.js：
window.Vue = require('vue');
Vue.component('formlements' ,require('./components/formelements/Input.vue') );
const app = new Vue({
el: '#app'
});
刀片：
<formlements :testinfo="{somekey
浏览 0提问于2018-05-03得票数 0
回答已采纳
我想添加一个滑块到我的面板。我发疯了
npm install vue-slider-component --save
然后，我创建了一个新组件，并在app.js中重新进行了测试
在我的Slider.vue组件中，我添加了startet模板
<template>
<div>
<vue-slider ref="slider" v-bind="options" v-model="value"></vue-slider>
<h3><small>Value: <
浏览 4提问于2018-07-06得票数 1
我现在正在使用Laravel和Vue.js进行开发。Vue文件包含在Laravel中，而不是分开。问题是我设置为通过应答API调用将数据发送到前端(Vue)。我最近将我的应用程序部署到VPS，现在任何人都可以使用curl命令向API发送GET/POST请求……请告诉我如何将API设置为私有/受限？我希望它只被Vue访问。仅供参考，我使用JWT-auth作为登录系统。
浏览 1提问于2020-06-15得票数 1
试图让.env变量在Laravel项目中的Vue组件中工作，但是返回的结果没有定义。我试过npm run watch，npm run dev，artisan serve，但是没有结果。
package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watc
浏览 8提问于2021-05-27得票数 2
2回答
我有一个创建产品，我想使用刀片填充customer_id隐藏输入，但用户可以更改它，而他/她在表单页面上。如何将预先选定的客户id传递给vue产品数据模型？下面是我的代码：
@section('content')
<input type="hidden" name="customer_id" value="{{ $customer->id }}" v-model="product.customer" />
@endsection
这是我的vue实例：
const app = new Vue
浏览 0提问于2017-03-26得票数 0
我想将我的应用程序的特定页面隐藏在一个安全层后面(一个简单的密码表单，它将向服务器发送一个请求进行验证)。
基于VueRouter的文档，我认为beforeEnter是合适的。但是，我不完全确定如何要求用户访问特定的组件，然后成功地输入密码，然后才允许继续使用当前的路由。
有人有这样的例子吗？我很难找到类似的东西。
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const routes = [
{ path: '/test/:testU
浏览 3提问于2017-06-24得票数 2
回答已采纳
1回答
我是VueJS的新手。
让我们假设我计划创建一个广泛的应用程序。例如，我有三个单独的页面: mypage.com/account、mypage.com/players、mypage.com/orders。每个页面都有自己的控制器，在其中我返回一个带有视图的文件(account.blade.php等)。并在变量中传递参数。那么，在每一个我都想使用Vue。这里我有几个问题：
1)是否需要为/ resources / js /文件夹中的每个页面创建单独的app.js文件？类似于：
app-account.js
const app-account = new Vue({
el: '#a
浏览 0提问于2020-05-14得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
