I am following the Vue.js documentation and run this example.
So here is the index.html file:
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>Bitcoin Price Index</h1>
<div v-for="currency in info" class="currency" >
{{ currency.description }}:
<span class="lighten">
<span v-html="currency.symbol"></span>
{{ currency.rate_float | currencydecimal }}
</span>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
And here is the index.js:
new Vue({
el: '#app',
data () {
return {
info: null
}
},
mounted () {
axios
.get('https://api.coindesk.com/v1/bpi/currentprice.json')
.then(response => (this.info = response.data.bpi))
},
filters: {
currencydecimal (value) {
return value.toFixed(2)
}
},
})
Output:
(you can copy paste the above code into here)
Question: in index.html, I do not understand where {{ currency.description }} is coming from. currency is not even declared as in the data of the Vue() instance.
v-for="currency in info"
This property currency is one of elements from info array.
It is defined in your .html file as v-for="currency in info"
See that in the index.html file that has a v-for. In case he assigns to currency each element of info. An array of objects is assigned to info in mounted
See more about JavaScript for/in Statement here
Related
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>
I have my input field in one div, and will have label in another div (as sidebar in my application). I want to update label in sidebar, as I type in input on first div.
I am happy to create second div a component if that's the way. I was reading online, and it was said we could use props to pass data to component. But I am not able to link input field to component. Please find my code as below:
var app = new Vue({
el: '#div1',
data: {
message: ''
}
})
Vue.component('testp', {
props: ['message'],
template: '<p>Message is: {{ message }}</p>'
})
var div2 = new Vue({
el: '#div2'
});
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="div1">
<input v-model="message" placeholder="edit me">
</div>
<div id="div2">
<testp></testp>
</div>
</body>
</html>
As Pointed in Comment You have no reason to have two separate Vue instance and the First Answer is correct. But in some cases where you really need to have multiple Vue instances, you can actually use them in the following manner.
var app = new Vue({
el: '#div1',
data: {
message: ''
}
})
Vue.component('testp', {
props: ['message'],
template: '<p>Message is: {{ message }}</p>'
})
var div2 = new Vue({
el: '#div2',
computed: {
newMessage() {
return app.message;
}
},
});
Html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="div1">
<input v-model="message" placeholder="edit me">
</div>
<div id="div2">
<testp :message="newMessage"></testp>
</div>
</body>
</html>
Please observe the computed value newMessage is actually getting its value form a different Vue instance (app) and it is also reactive. Therefore whenever the value in first Vue instance changes, it is updated in another Vue instance.
Codepen: https://codepen.io/ashwinbande/pen/xMgQQz
Like I have pointed out in my comments, there is no reason for you to use two separate Vue instances. What you can do is simply wrap everything within an app container, e.g. <div id="#app">, and then instantiate your VueJS instance on that element instead.
Then, you can use v-bind:message="message" on the <testp> component to pass in the message from the parent. In this sense #div1 and #div2 are used entirely for markup/decorative purposes and are not used as VueJS app containers in your code.
Vue.component('testp', {
props: ['message'],
template: '<p>Message is: {{ message }}</p>'
});
var app = new Vue({
el: '#app',
data: {
message: ''
}
});
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<div id="div1">
<input v-model="message" placeholder="edit me">
</div>
<div id="div2">
<testp v-bind:message="message"></testp>
</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've created a Codepen of very simplified version of an app that I'm trying to build (im new to Vue):
https://codepen.io/dagford/project/editor/XVaaBo
Problem 1 - I'd like to use methods rather than computed, however, as you can see what is happening if I use methods.
Problem 2 - the displayTotal function is not working at all (whether I use methods OR computed.
You should use computed for only total. From vue doc
means if any of its dependencies changes it will recalculate
computed properties are cached based on their dependencies.
var app1 = new Vue({
el: '#app1',
data: {
message: 'Hello Vue.js!',
num1: 1,
num2: 2
},
computed: {
displayTotal: function() {
return parseFloat(this.num1) + parseFloat(this.num2);
}
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>My New Pen!</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app1">
<p>{{ message }}</p>
<p>Display number one: {{ num1 }} : <input type="number" v-model="num1"></p>
<p>Display number two: {{ num2 }} : <input type="number" v-model="num2"></p>
<p>Display total: {{ displayTotal }}</p>
</div>
</body>
</html>
displayNum1 and displayNum2 are methods, but you address them as vars. Try placing () in your html
<p>Display number one: {{ displayNum1() }}</p>
<p>Display number two: {{ displayNum2() }}</p>
That also applies to your displayTotal();
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.