I am working in laravel 4.2 and I want to implement Vue.js into my application. When I put some testing code in my blade it only shows error that "Use of undefined constant message - assumed 'message'"I know that laravel read {{message}} like php code but do you know any solution how to add vue.js to my blade? Thanks for help.
Here is code
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'hello from Vue.js 2.0'
}
})
</script>
<div id="app">
<p>{{ message }}</p>
</div>
You can add # before print message veriable
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<script>
$(document).ready(function () {
new Vue({
el: '#app',
data: {
message: 'hello from Vue.js 2.0'
}
})
});
</script>
<div id="app">
<p>#{{ message }}</p>
</div>
escape the code using #
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'hello from Vue.js 2.0'
}
})
</script>
<div id="app">
<p>#{{ message }}</p>
</div>
See Displaying Raw Text With Curly Braces section here
Related
I watched a video lesson on vueschool and repeated the code as the teacher. But it doesn't work for me, and it works for him. In the browser console, it shows that there is no template indexer, but why does it all work?
HTML:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="app">
<p>Просто текст</p>
<click-counter></click-counter>
<click-counter></click-counter>
<click-counter></click-counter>
</div>
<script scr="vue.js"></script>
<script src="app.js"></script>
</body>
</html>
vue js
Vue.component ('click-counter', {
template: "<button #click="count++">{{count}}</button>",
data() {
return {
count: 0
}
}
})
new Vue ({
el: "#app"
})
In the component template, please use ' quotes to wrap the click function. Since you are using double quotes to wrap button, the same cannot be used in it which tends to close the first one.
Please find below the code
Vue.component('click-counter', {
template: "<button #click='count++'>{{count}}</button>",
data() {
return {
count: 0
}
}
})
new Vue({
el: "#app"
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>
<div id="app">
<click-counter/>
</div>
Change this line:
"<button #click="count++">{{count}}</button>"
Give this:
"<button #click='count++'>{{count}}</button>"
Make sure that, you have import vuejs in your file.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
I'm making a website using Javascript and Vue.js and found a plugin for making a 3d carousel https://www.bestjquery.com/?ynVfL3CE,but when i import these i get the error "Uncaught SyntaxError: Cannot use import statement outside a module".My code below.
<html>
<head>
<script src="js/vue.js"></script>
<script src="js/carousel.js"></script>
</head>
<body>
<div id="example">
<carousel-3d :autoplay="true" :autoplay-timeout="5000" :display="3">
<slide v-for="(slide, i) in slides" :index="i">
<span class="title">You know</span>
<p>You know, being a test pilot isn't always the healthiest business in the world.</p>
</slide>
</carousel-3d>
</div>
<script>
new Vue({
el: '#example',
data: {
slides: 7
},
components: {
'carousel-3d': Carousel3d.Carousel3d,
'slide': Carousel3d.Slide
}
})
</script>
Code from carousel.js
import Vue from 'vue';
import Carousel3d from 'vue-carousel-3d';
Vue.use(Carousel3d);
try the updated module syntax https://jakearchibald.com/2017/es-modules-in-browsers/:
<script type="module" src="js/carousel.js"></script>
I followed this Vuejs video tutorial : https://laracasts.com/series/learn-vue-2-step-by-step/episodes/9?autoplay=true
My HTML seems like him (except his design) :
<div id="app">
<message title="My Component title" body="Lorem ipsum dry"></message>
</div>
Then my vuejs code :
<script type="text/javascript" src="{{ asset('js/vue.js') }}"></script>
<script>
new Vue({
el: '#app',
delimiters: ['${', '}']
});
Vue.component('message', {
props: ['title', 'body'],
template: `
<article class="message">
<div class="message-header">
${title}
</div>
<div class="message-body">
${body}
</div>
</article>
`
});
</script>
I changed Vuejs variable delimiters because it's a twig template file.
Inspecting the source code in the browser, the HTML code is not replaced by the code defined in the template... I don't see why.
You are declaring your template using JavaScript template strings (`).
You need to escape ${ in template strings, because they have specific meaning for them. Escape like: \${
Also, you need to declare the delimiters on the component itself.
JSBin demo: http://jsbin.com/notocozepi/edit?html,js,output
Source:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="app">
<message title="My Component title" body="Lorem ipsum dry"></message>
</div>
<script type="text/javascript" src="https://unpkg.com/vue"></script>
<script>
Vue.component('message', {
props: ['title', 'body'],
delimiters: ['${', '}'],
template: `
<article class="message">
<div class="message-header">
\${title}
</div>
<div class="message-body">
\${body}
</div>
</article>
`
});
new Vue({
el: '#app',
delimiters: ['${', '}']
});
</script>
</body>
</html>
One last note: mind the order. The components must be defined before they are used.
I'm trying out vue.js for the first time, and a beginner javascript programmer. I'm going through the vue.js getting started page
My html code is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React Tutorial</title>
<script src="bower_components/vue/dist/vue.js"></script>
<script src="js/myVue.js"></script>
</head>
<body>
<div id="demo">
<h1>{{title | uppercase}}</h1>
<ul>
<li
v-for="todos"
v-on="click: done = !done"
class="{{done ? 'done' : ''}}">
{{content}}
</li>
</ul>
</div>
</body>
</html>
and myVue.js file is
window.onload = function () {
var demo = new Vue({
el: '#demo',
data: {
title: 'todos',
todos: [
{
done: true,
content: 'Learn JavaScript'
},
{
done: false,
content: 'Learn Vue.js'
}
]
}
});
}
The Getting started code is old because v-repeat has beeen depreciated and replaced with v-for. When I use v-for I get the warning "alias is required in v-for". I also get an uncaught typeError "cannot read property "create" of undefined.
The JSFiddle code does not work either.
v-for requires alias means you have to name the variable in your for loop, like so:
<li
v-for="todo in todos"
#click="todo.done = !todo.done"
v-bind:class="{'done' : todo.done}">
{{todo.content}}
</li>
I got an error when I want try to add a component into a div DOM in another component.
Uncaught Error: Assertion Failed: You cannot append to an existing Ember.View. Consider using Ember.ContainerView instead.
here is my JSBin
App = Ember.Application.create();
App.MyListComponent= Ember.Component.extend({
layoutName:'my-list',
actions:{
addItem:function(){
console.log("add item action");
App.MyListItemComponent.create().appendTo("#holder");
},
},
});
App.MyListItemComponent= Ember.Component.extend({
layoutName:'my-list-item',
});
html, body {
margin: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://builds.emberjs.com/release/ember-template-compiler.js"></script>
<script src="http://builds.emberjs.com/release/ember.debug.js"></script>
</head>
<body>
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
{{my-list}}
</script>
<script type="text/x-handlebars" id="my-list">
<button {{action "addItem"}}>add item</button>
This is a holder:
<div id="holder">
i am inside holder
</div>
This is static item:
{{my-list-item}}
</script>
<script type="text/x-handlebars" id="my-list-item">
i am a list item
</script>
</body>
</html>
can you have a look and tell me how to do?
thank you very much
I dont think, your approach is right.
A component should be working independently from the context in which it is added. You can pass anything as argument to the component within the template. I would recommend displaying the components depending on some type of model that is added with each addItem click (in my example, a simple text).
Why don't you try it this way:
JS
App = Ember.Application.create();
App.MyListComponent= Ember.Component.extend({
components: Ember.A([]),
layoutName:'my-list',
actions:{
addItem:function(){
var components = this.get('components');
console.log(components);
components.pushObject ('test'); // or whatever you want: could also be components.pushObject(App.MyListItemComponent.create()); if you want to use it later somehow.
this.set('components', components);
console.log("add item action");
},
},
});
App.MyListItemComponent= Ember.Component.extend({
layoutName:'my-list-item',
});
html
<script type="text/x-handlebars" id="my-list">
<button {{action "addItem"}}>add item</button>
This is a holder:
<div id="holder">
i am inside holder {{components.length}}
{{#each components as |item|}}
{{my-list-item}}
{{/each}}
</div>
This is static item:
{{my-list-item}}