在 laravel 刀片视图中显示 vue js 模板
Posted
技术标签:
【中文标题】在 laravel 刀片视图中显示 vue js 模板【英文标题】：Display vue js template into laravel balde view 【发布时间】：2020-09-22 01:33:30 【问题描述】：试图将 vue js 组件放入 laravel Blade 但没有得到它，我试图查看所有教程和所有堆栈溢出但无法解决我的问题。 这是我要展示的模板
<template>
<div>
<div class="container">
<div class="alert alert-info text-center">
<template v-if="favourites > 0">
<span><i class="fa fa-heart"></i> favourites </span>
<hr>
<div v-for="iof in itemsOnFavourites" class="mini" :style="'background-image': 'url('+iof.img+')'" @click="iof.favourite=false" title="remove"></div>
<div class="mini-drop" title="drop all" @click="dropFavourites()"><i class="fa fa-trash"></i></div>
<div style="clear: both;"></div>
</template>
<template v-else>
<span class="empty"><i class="fa fa-heart-o"></i></span>
</template>
</div>
<div class="alert alert-info text-center">
<div v-if="total > 0">
<span><i class="fa fa-dollar"></i> total <i class="fa fa-shopping-basket"></i></span><br />
<hr>
<template v-for="iob in itemsOnBasket">
<div v-for="idx in iob.quantity" class="mini" :style="'background-image': 'url('+iob.img+')'" @click="iob.quantity--" title="remove"></div>
</template>
<div class="mini-drop" title="drop all" @click="dropBasket()"><i class="fa fa-trash"></i></div>
<div style="clear: both;"></div>
</div>
<div v-else>
<span class="empty"><i class="fa fa-shopping-basket"></i></span>
</div>
</div>
<div style="clear: both;"></div>
</div>
<div v-for="item in items" class="card" :class="selected: item.quantity > 0, favourite: item.favourite">
<h1 @click="item.favourite=!item.favourite" title="toggle favourite">
item.title
<span class="favourite">
<i class="fa" :class=" 'fa-heart': item.favourite===true, 'fa-heart-o': item.favourite === false"></i>
</span>
</h1>
<div class="text-center img">
<img :src="item.img" >
</div>
<div class="info">
<p> item.info </p>
</div>
<div class="form-control text-right">
<div class="price"><i class="fa fa-dollar"></i>item.price </div>
<div class="quantity" v-if="item.quantity > 0"> item.quantity</div>
<button @click="item.quantity=0" :disabled="item.quantity === 0" :class="disabled: item.quantity === 0"><i class="fa fa-trash"></i></button>
<button @click="item.quantity++"><i class="fa fa-plus"></i></button>
</div>
</div>
<div style="clear: both;"></div>
</div>
</template>
此模板保存为 RateCard.vue，这是导入此 vue 的 app.js 代码
require('./bootstrap');
window.Vue = require('vue');
Vue.component('ratecard', require('./components/RateCard.vue').default);
const app = new Vue(
el: '#app',
data:
items: function getAllProducts()
return [
img: 'http://rajcsanyizoltan.hu/codepen/sw01.png',
title: 'Guavian Security Soldier',
info: 'Guavian soldiers undergo cybernetic augmentation, with a mechanical reservoir and pump injecting chemicals into their bloodstreams to enhance speed and aggression. They are silent in battle, communicating via high-frequency datastreams. Han Solo ran afoul of the Guavians for failing to repay their 50,000-credit loan.',
favourite: false,
price: 0.75,
category: 'Star Wars',
quantity: 1,
,
img: 'http://rajcsanyizoltan.hu/codepen/sw02.png',
title: 'First Order Snowtrooper',
info: 'First Order Snowtroopers are specialized stormtroopers trained and equipped to operate in the galaxy’s coldest environments. They wear the latest thermally insulated armor plating over a quilted body suit, and even their boots have extra-tough grips for walking on frozen terrain. The narrow visor-slit in their helmets cuts down on glare from surrounding ice, letting them battle more effectively.',
favourite: false,
price: 1.15,
category: 'Star Wars',
quantity: 0
,
img: 'http://rajcsanyizoltan.hu/codepen/sw03.png',
title: 'IG-88',
info: 'Tall, thin and extremely intimidating, IG-88 is an IG-series assassin droid who has turned his extremely capable skills to the job of bounty hunting. His sophisticated stealth and tracking programming and a 360-degree ring of glowing orange optical sensors make him hard to hide from, and almost impossible to escape.',
favourite: false,
price: 1,
category: 'Star Wars',
quantity: 0
,
img: 'http://rajcsanyizoltan.hu/codepen/sw04.png',
title: 'Quarrie',
info: 'Quarrie is the curmudgeonly old Mon Calamari engineer who designed the Rebel Alliance’s first prototype B-Wing Fighter. A genius at starship design who prefers to be left alone while he works, he reluctantly agrees to take Rowan Freemaker on as an apprentice, but soon comes to respect the impulsive youngster’s amazing instinct for creative building.',
favourite: false,
price: 0.5,
category: 'Star Wars',
quantity: 0
,
img: 'http://rajcsanyizoltan.hu/codepen/sw05.png',
title: '4-LOM',
info: 'Once a basic protocol droid, the ambitious 4-LOM broke his own programming to become a professional bounty hunter, scouring the galaxy for most-wanted targets in exchange for valuable credits and upgrades. His insect-like head, modeled after the species that he was originally built to serve, makes him recognizable wherever he goes.',
favourite: false,
price: 2,
category: 'Star Wars',
quantity: 0
,
img: 'http://rajcsanyizoltan.hu/codepen/sw06.png',
title: 'Probe Droid',
info: 'When you’re looking for someone who could be hiding anywhere in the galaxy, why send an Imperial spy or an expensive bounty hunter when you could release a swarm of probe droids? Equipped with cameras, blasters and long-range communication arrays, these sneaky, hovering, multi-armed droids can be launched through space to locate your enemies, observe their activities, and then report back everything that they find.',
favourite: false,
price: 3,
category: 'Star Wars',
quantity: 0
,
img: 'http://rajcsanyizoltan.hu/codepen/sw07.png',
title: 'Bossk',
info: 'A reptilian Trandoshan, Bossk is a cold-blooded and capable bounty hunter with a particular hatred for Wookiees. He prefers to work alone, but is willing to cooperate with his fellow bounty hunters if it means that they will have a better chance of tracking down and capturing an especially dangerous target…at least, if the fee is high enough to share.',
favourite: false,
price: 0.30,
category: 'Star Wars',
quantity: 0
,
img: 'http://rajcsanyizoltan.hu/codepen/sw08.png',
title: 'First Order Colonel',
info: 'Officers in the First Order military have been trained to believe in the cause and methods of the old Galactic Empire above all else. With complete obedience to Supreme Leader Snoke, they permit no disloyalty or hesitation in the troops under their command as they seek to tear down the New Republic and crush the Resistance.',
favourite: false,
price: 1,
category: 'Star Wars',
quantity: 0
,
img: 'http://rajcsanyizoltan.hu/codepen/sw09.png',
title: 'Resistance officer',
info: 'Resistance officers are commanders in the effort to repel the attacks of the evil First Order. All volunteers, and many veterans of the old Rebel Alliance, they lead their forces through clever tactics and brave inspiration as they fight to protect the New Republic and defend the cause of freedom throughout the galaxy.',
favourite: false,
price: 1,
category: 'Star Wars',
quantity: 0
,
img: 'http://rajcsanyizoltan.hu/codepen/sw10.png',
title: 'Unkar’s Thug',
info: 'At Niima Outpost on Jakku, the greedy junk boss Unkar Plutt has hired a group of petty criminals to act as his eyes, ears and fists. Bullies with more muscle than brains, they are happy to take Unkar’s low wages in exchange for getting to deal with any junk scavenger who dares to defy his authority or try to make deals without cutting him in on the profits.',
favourite: false,
price: 2.25,
category: 'Star Wars',
quantity: 0
,
img: 'http://rajcsanyizoltan.hu/codepen/sw11.png',
title: 'Aayla Secura',
info: 'Aayla Secura is a Jedi Master and a member of the Twi’lek species. During the Clone Wars, she leads the clone troopers of the Republic’s 327th Star Corps in battle against the droid forces of the Separatists. She is skilled with a lightsaber and is known for having a better sense of humor than most Jedi Knights.',
favourite: true,
price: 2,
category: 'Star Wars',
quantity: 0
,
img: 'http://rajcsanyizoltan.hu/codepen/sw12.png',
title: 'Bala-Tik',
info: 'A human agent of the Guavian Death Gang, Bala-Tik is determined to collect the credits owed to his criminal organization by the infamous smuggler, Captain Han Solo. Unfortunately for him, Solo’s cargo freighter is carrying a pair of ravenous rathtars, which soon set their sights – and their appetites – on Bala-Tik and his soldiers.',
favourite: false,
price: 1,
category: 'Star Wars',
quantity: 0
,
img: 'http://rajcsanyizoltan.hu/codepen/sw13.png',
title: 'Clone Trooper Gunner',
info: 'The Republic’s clone troopers may all share the same face and genes, but not every clone serves the same function. Some are specially trained to use the heavy weaponry of vehicles like tanks and gunships. These clone trooper gunners wear reinforced armor and sound-dampening helmets to help them handle the recoil and noise of heavy laser blasters.',
favourite: false,
price: 1,
category: 'Star Wars',
quantity: 0
,
img: 'http://rajcsanyizoltan.hu/codepen/sw14.png',
title: 'M-OC Hunter Droid',
info: 'A mechanical creation personally designed by Emperor Palpatine himself, the fearsome M-OC is programmed for a single, all-consuming task: to hunt down the Force-sensitive Rowan Freemaker and retrieve him for the Emperor. To complete his mission, M-OC has been outfitted with a powerful hunter-seeker starship, the Tracker I, and an entire arsenal of built-in weaponry and gadgets that he can deploy against any obstacle in his way.',
favourite: false,
price: 2.25,
category: 'Star Wars',
quantity: 0
,
img: 'http://rajcsanyizoltan.hu/codepen/sw15.png',
title: 'Chopper™',
info: 'C1-10P, nicknamed “Chopper”, is a very unusual little droid. Once an outdated astromech model, he has been customized, repaired and rebuilt over the years, leaving him with a mismatched appearance and a variety of useful gadgets hidden inside his patchwork body. He has also developed a mischievous and cranky personality, but the crew of the Ghost puts up with his antics because they know that Chopper is ultimately loyal and helpful…at least, when he feels like it.',
favourite: false,
price: 1.5,
category: 'Star Wars',
quantity: 0
,
img: 'http://rajcsanyizoltan.hu/codepen/sw16.png',
title: 'Admiral Raddus™',
info: 'A member of the amphibious Mon Calamari species, Admiral Raddus has proven his leadership qualities as a high-ranking member of the Rebel Alliance. He and the brave forces under his command will do whatever they can to take down the Galactic Empire and end the Emperor’s reign of tyranny over the galaxy.',
favourite: false,
price: 1.2,
category: 'Star Wars',
quantity: 0
,
img: 'http://rajcsanyizoltan.hu/codepen/sd01.png',
title: 'Fred Joness',
info: 'Fred is the glue that keeps Mystery Inc. together, and his mind is always two or three steps ahead of the monster they’re after. He sees mysteries as a chess match, and nothing makes him happier than planning genius and elaborate traps to catch ghosts, vampires, bogeymen and more!',
favourite: false,
price: 0.5,
category: 'Scooby-Doo',
quantity: 0
,
img: 'http://rajcsanyizoltan.hu/codepen/sd02.png',
title: 'Daphne Blake',
info: 'Brave, beautiful and brainy, Daphne is the most enthusiastic member of Mystery Inc. She never leaves home without her camera and her notebook because someday she wants to be either a famous mystery writer or an investigative journalist. While she and Velma might be tied for most fearless members of the group, Daphne is definitely the most danger-prone. Unafraid to plunge forward into scary situations, it’s a good thing Daphne has a background in martial arts!',
favourite: false,
price: 0.75,
category: 'Scooby-Doo',
quantity: 0
,
img: 'http://rajcsanyizoltan.hu/codepen/sd03.png',
title: 'Velma Dinkley',
info: 'Velma is the resident whiz kid of Mystery Inc. Her hyper-analytical mind deciphers clues almost as fast as she can say “Jinkies!” Although the group tries to stick together, Velma often ends up wandering off by herself, searching for the next clue. While Scooby-Doo’s weakness is snacks, Velma’s weakness is her glasses. Without her black-rimmed specs, she’s almost completely blind!',
favourite: false,
price: 0.75,
category: 'Scooby-Doo',
quantity: 2
,
img: 'http://rajcsanyizoltan.hu/codepen/sd04.png',
title: 'Shaggy Rogers',
info: 'Like, Shaggy might be the hungriest, goofiest, most-fearful member of the group, but the bond he shares with Scooby-Doo sees him through thick and thin. He might run at the first sign of danger, but when it comes to helping his friends, he’s always ready to step in! Although Shaggy’s main talent is snacking, he also has a special gift: he is a renowned ventriloquist, and he has used this special ability on more than one occasion to get Mystery Inc. out of sticky situations!',
favourite: false,
price: 0.75,
category: 'Scooby-Doo',
quantity: 1
,
img: 'http://rajcsanyizoltan.hu/codepen/sd05.png',
title: 'Scooby-Doo',
info: 'A Great Dane with an even greater appetite, Scooby-Doo reluctantly chases ghosts and ghouls with the rest of Mystery Inc. Although Scooby-Doo is always up for an adventure, he prefers activities that end with an all-you-can-eat buffet. When his friends need him, Scooby-Doo will run to the rescue! His best friend in the whole world is Shaggy, and you can usually find the two of them running away from a monster or snacking on double-decker sandwiches in the back of the Mystery Machine.',
favourite: false,
price: 0.75,
category: 'Scooby-Doo',
quantity: 0
,
img: 'http://rajcsanyizoltan.hu/codepen/sd06.png',
title: 'Swamp Creature',
info: 'Beware the swamp if you don’t want to run into the sticky, slimy Swamp Creature! Stomping back and forth and groaning loudly enough to be heard by the townspeople nearby, no one has been brave enough to enter the swamp – until Mystery Inc. showed up in town!',
favourite: false,
price: 0.75,
category: 'Scooby-Doo',
quantity: 0
,
img: 'http://rajcsanyizoltan.hu/codepen/sd07.png',
title: 'The Headless Horseman',
info: 'Many years ago, the Headless Horseman was a soldier who had his head knocked off by a cannonball before he was buried in Sleepy Hollow. Every Halloween he rises from the grave to look for a new head, and lately he seems to be interested in the Crane Family Diamond!',
favourite: false,
price: 0.75,
category: 'Scooby-Doo',
quantity: 0
,
img: 'http://rajcsanyizoltan.hu/codepen/sd08.png',
title: 'Mummy',
info: 'Ankha was the most feared of all Egyptian Pharaohs. After his death and burial 3000 years ago, Ankha’s tomb had been recently uncovered and his mummy brought to the Department of Archeology in America. The Pharaoh created a curse that declared whoever removed him from his tomb would be turned to stone, but the curse never came true.',
favourite: false,
price: 0.75,
category: 'Scooby-Doo',
quantity: 0
,
img: 'http://rajcsanyizoltan.hu/codepen/sd09.png',
title: 'Zombie',
info: 'A mumbling, stumbling creature has been scaring locals out of the woods for weeks. He always seems to be digging in the ground when people wander by…',
favourite: false,
price: 0.9,
category: 'Scooby-Doo',
quantity: 0
,
img: 'http://rajcsanyizoltan.hu/codepen/sd10.png',
title: 'Lighthouse Keeper',
info: 'The Lighthouse Keeper is the creepy, shuffling ghost that haunts the old Wisconsin lighthouse and doesn’t let any boats dock at the lighthouse; that is, except for boats owned by the Dempsey family.',
favourite: false,
price: 0.9,
category: 'Scooby-Doo',
quantity: 0
,
img: 'http://rajcsanyizoltan.hu/codepen/sd11.png',
title: 'Black Knight',
info: 'The Black Knight was a large, black suit of English armor that was rumored to come alive at night when the moon was full. Despite being made out of heavy metal, the Black Knight could move very quickly, and you would never know where he was – until he was right behind you!',
favourite: false,
price: 2.25,
category: 'Scooby-Doo',
quantity: 0
,
img: 'http://rajcsanyizoltan.hu/codepen/sd12.png',
title: 'Ghost',
info: 'A spooky phantom that walks through walls and glows in the dark. His creepy moans echo throughout the Mystery Mansion, scaring locals away.',
favourite: false,
price: 0.9,
category: 'Scooby-Doo',
quantity: 0
,
img: 'http://rajcsanyizoltan.hu/codepen/sd13.png',
title: 'Vampire',
info: 'With pale skin, pointy ears and glowing red eyes, the Vampire has been keeping people away from the Mystery Mansion for years. When he first met Mystery Inc., he attempted to lure them into multiple traps within the mansion, but was unsuccessful.',
favourite: false,
price: 0.9,
category: 'Scooby-Doo',
quantity: 0
,
]
,
components:
'ratecard': require('./components/RateCard'),
,
computed:
total: function()
var total = 0;
this.items.forEach(function(item)
total += item.price*item.quantity;
);
return Math.round(total*100)/100;
,
favourites: function()
var counter = 0;
this.items.forEach(function(item)
counter += item.favourite?1:0;
);
return counter;
,
itemsOnBasket: function()
var iob = [];
this.items.forEach(function(item)
if (item.quantity > 0)
iob.push(item);
);
return iob;
,
itemsOnFavourites: function()
var iof = [];
this.items.forEach(function(item)
if (item.favourite)
iof.push(item);
);
return iof;
,
,
methods:
dropFavourites: function()
this.items.forEach(function(item)
item.favourite = false;
);
,
dropBasket: function()
this.items.forEach(function(item)
item.quantity = 0;
);
);
这是 Laravel 刀片视图，我试图用 app.js 中的值显示此模板
@section('signup')
@show
<div id="ratecard" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-body">
<div class="modal-header" style="width: 1300px;margin-left:-380px; height: 100px; margin-top: -50px; background:#3C7655 ">
</div>
<div class="col-md-12 col-xs-12 col-sm-12 login_form" --style="width: 800px; margin-left:-150px; border-radius: 20px; overflow: auto;
max-height: 100vh; "-- style="border-radius: 20px;">
<div class="container-fluid">
<div class="row">
<div id="app">
<ratecard></ratecard>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
把app.js调用成光头标签
<script type="text/javascript" src="asset('public/js/app.js')"></script>
运行 npm run watch build 后运行成功，但是 laravel 刀片中仍然没有显示，包 json 依赖项是完美的。
【问题讨论】：
不应从resources 文件夹加载Javascript（和SCSS）。运行npm run dev 或npm run watch 后，resources 文件夹中的文件将被编译到public 中的相应文件夹中。 laravel.com/docs/7.x/frontend
检查为<script type="text/javascript" src="asset('/js/app.js')"></script>，但没有显示这个src文件
已经尝试过了，从任何地方都没有出错，但仍然是同样的情况
您的组件的items 属性应该设置为数组，不是函数。
我已经设置了 item 这样的 items: getAllProducts() 和 getAllProducts() 函数在带有脚本标签的 vue js 组件中调用它，但仍然是同样的问题。
【参考方案1】：
您需要从组件的模板中删除 id 为“app”的 div，并将其放入您的刀片模板中。当您的 Vue 实例被创建（在 app.js 文件中）时，它会在当前页面标记中查找具有该 id 的元素以将其附加到。
【讨论】：
之前也尝试过这个解决方案，但没有成功，来这里之前尝试了很多解决方案，但没有人有解决方案，他们都说了你刚刚回答的问题，我尝试了所有可以通过的以上是关于在 laravel 刀片视图中显示 vue js 模板的主要内容，如果未能解决你的问题，请参考以下文章