I want to bind an image using binding attribute. But reason is that when i run my code it show the Unexpected identifier error
this is my index.html file code
<div id='app'>
<h2>{{product}}</h2>
<div class="flex-container">
<div class="product">
<div class="product-image">
<img v-bind:src="image"/>
</div>
<div class="product-info">
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>
<script type="text/javascript" src="main.js"></script>
This is main.js code
var app = new Vue({
el: '#app',
data: {
product: 'Socks'
image : "./img/1.png"
}
})
var app = new Vue({
el: '#app',
data: {
product: 'Socks',
image : "./img/1.png"
}
})
You are missing a comma after the product ppty -- 'Socks'
You can check the fiddle here.
https://jsfiddle.net/p0dynL8o/
Related
When I import a component with VueJs content into another component with VueJs content I get this error:
Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <style>, as they will not be parsed.
example.blade.php is the component
<div id="appComp">
#{{ msg }}
</div>
<script>
var appComp = new Vue({
el: '#appComp',
data: {
msg : #json($msg),
}
});
</script>
app.blade.php which imports the example component
<head>
<script src="https://cdn.jsdelivr.net/npm/vue#2/dist/vue.js"></script>
</head>
<div id="app">
<x-example/>
#{{ text }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
text: #json($text),
}
});
</script>
if I move <x-example/> out <div id="app">, everything works fine, but it's not good for me.
<x-example/>
<div id="app">
#{{ text }}
</div>
What solutions can I find to use Laravel blades with VueJs source code?
Why the below vue js code showing output 102.
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue#2/dist/vue.js"></script>
</head>
<body>
<div id = "intro" style = "text-align:center;">
<h1>{{ ++serial }}</h1>
</div>
<script type = "text/javascript">
var app = new Vue({
el: '#intro',
data: {
serial: 0
}
});
</script>
</body>
</html>
I need an explanation. My expected output is 1. How to fix that?
It's not allowed to run statements that update component's properties inside the template because this will make an infinite loop, you could achieve the desired behavior using a computed property as shown below:
var app = new Vue({
el: '#intro',
data: {
serial: 0
},
computed: {
incrementedSerial() {
return ++this.serial
}
}
});
<script src="https://cdn.jsdelivr.net/npm/vue#2/dist/vue.js"></script>
<div id="intro" style="text-align:center;">
<h1>{{ incrementedSerial }}</h1>
</div>
That's an assignment statement, which isn't allowed in an interpolation.
From the docs:
These expressions will be evaluated as JavaScript in the data scope of the owner Vue instance. One restriction is that each binding can only contain one single expression, so the following will NOT work:
<!-- this is a statement, not an expression: -->
{{ var a = 1 }}
Your code is roughly the equivalent of:
{{ serial = serial + 1 }}
Here's how you could make a calculation with it in a loop:
new Vue({
el: "#app",
data() {
return {
serial: 0
}
}
});
<div id="app">
<div v-for="i in 5">
{{ i + serial }}
</div>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
So I've got an Object namely:
test:{price: 9, qty:1}
How can I loop through this object and only get the second value namely the qty?
JS:
new Vue({
el: '#app',
data: {
test:{price: 9, qty:1}
}
HTML:
<div v-for="(value, key, index) in test>
{{ value[1] }}
</div>
Since test is an object and you want to access just a single property, so there is no need to loop here you can simply access the object property using . dot notation like:
<div>
{{ test.qty }}
</div>
Demo:
new Vue({
el: '#app',
data: {
test: {
price: 9,
qty: 1
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<div id="app">
<div class="card p-2">
Qty: {{ test.qty }}
</div>
</div>
While studying Vue By self-taught, I faced some problem.
First, I bind some component by new Vue ({el:" # id "}).
And when I bind root component <div id = "app"> by new Vue ({el:" # app "}),
It ruin what already was binding there.
My function and data in new Vue ({el:" # id "}) didn't work anymore.
Am I doing the wrong design?
If so, how should I approach the problem?
<html>
<head>
<script src="https://unpkg.com/vue#2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div id="comp-a">
<input type="text" v-model="message"/>
{{message}}
</div>
</div>
</body>
<script>
new Vue({
el : "#comp-a",
data : {
message : "message"
}
})
new Vue({
el : "#app"
})
</script>
You can use component.
reference: https://v2.vuejs.org/v2/guide/components.html
let comp_a=Vue.component('comp-a', {
data: function () {
return {
message: ""
}
},
template: ` <div><input type="text" v-model="message"/>
{{message}}</div>`
});
let app = new Vue({
el:"#app"
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<comp-a></comp-a>
</div>
If you want to component's html code in html area. template can point to by id. you can do following:
let comp_a=Vue.component('comp-a', {
data: function () {
return {
message: ""
}
},
template: "#comp-a"
});
let app = new Vue({
el:"#app"
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<comp-a></comp-a>
</div>
<template id="comp-a">
<div>
<input type="text" v-model="message"/>
{{message}}
</div>
</template>
VueJS does not work this way. You don't nest IDs. You could do this:
<html>
<head>
<script src="https://unpkg.com/vue#2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
</div>
<div id="comp-a">
{{message}}
</div>
</body>
<script>
new Vue({
el : "#app"
})
new Vue({
el : "#comp-a",
data : {
message : "message"
}
})
</script>
But even that approach has problems. You really should have only one matching VueJS area.
The only reason to have two is if you really have two applications running on the same html file. I have never seen a reason to do that.
I want to replace my project's first piece of vanilla JS with vue.
I try to get the hello world example working.
It works as stated, but when I nest the element in another element (these may be the wrong terms) it does not work.
My source code:
<!-- this works -->
<div id="app">
<p>${ message }</p>
</div>
<!-- but this doesn't for some reason -->
<div class="container">
<div id="app">
Nested ${ message }
</div>
</div>
Full code example.
The class="container" is needed for bootstrap.
EDIT:
I took the generated html and edited it down to just the bare minimum to show it not working.
See the result.
Wrap the container with
<div id="app"></div>
It should work that way
this works fine, the problem in your template is that you have two elements with id="app" so vue instance is initialized with the first element with id="app", then the second (the nested one) is never initialized
<html>
<head>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<!-- but this doesn't for some reason -->
<div class="container">
<div id="app">
Nested ${ message }
</div>
</div>
<script>
new Vue({
delimiters:['${', '}'],
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</body>
</html>
You have 2 #app id but one vue instance. If you need two #app you should make two Vue instance. Instance 1 for #app1 and instance 2 for #app2. You can save theme in variables if you need to interact within theme:
<div id="app1">
<p>${ message }</p>
</div>
<div class="container">
<div id="app2">
Nested ${ message }
</div>
</div>
<script>
var app1 = new Vue({
delimiters:['${', '}'],
el: '#app1',
data: {
message: 'Hello Vue.js!'
}
});
var app2 = new Vue({
delimiters:['${', '}'],
el: '#app2',
data: {
message: 'Hello Vue.js!'
}
})
</script>
if this answer helped you, consider to accept it.