This code does not repeat the component only displays the number in text input... I want to repeat the component
var app= new Vue({
el:'#app',
data:{
number:Number,
},}
);
<div id="app">
<p>Enter the number you want</p>
<input v-model="number"></input>
<div v-for='i in number'>
<span>{{i}}</span
</div>
</div>
First, you need a value in data, not a type. number: '' or number:0.
Second, you need to convert the text to a number. v-model.number
edit
Third, close your span tag.
The convert the text to a number part is the main reason your code fails though...
var app = new Vue({
el: '#app',
data: {
number: '',
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<p>Enter the number you want</p>
<input v-model.number="number"></input>
<div v-for='i in number'>
<span>{{i}}</span>
</div>
</div>
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 this couple of 'cards' with this content
<div class='card'>
<span>title one </span>
<button #click='open = !open'>show</button>
</div>
<div class='card'>
<span>title two </span>
<button #click='open = !open'>show</button>
</div>
Where in the same component I show this modal. What i need to show inside of it is if I click the first button, show title one, if I click button 2,show title 2 and so on...
What will be the best approach to do this task? (show in modal the card content)
First a couple of things:
ooen might be a typo, did you mean open?
=! looks like a single operator but it actually means open = !open in this context. Put a space between the = and ! to make it clear what it means.
If you want to control the visibility of two sections independently then you will need two separate data properties (open1 and open2). Use v-if or v-show to control the visibility.
new Vue({
el: '#app',
data: {
open1: false,
open2: false,
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="card">
<span v-if="open1">title 1</span>
<button #click="open1 = !open1">toggle</button>
</div>
<div class="card">
<span v-if="open2">title 2</span>
<button #click="open2 = !open2">toggle</button>
</div>
</div>
If you will have lots of these, then wrap the functionality into a separate component so you don't have to define open1, open2, ... and so on.
Vue.component('card', {
template: `
<div class="card">
<span v-if="open"><slot/></span>
<button #click="open = !open">toggle</button>
</div>`,
data() {
return {
open: false
}
}
})
new Vue({
el: '#app'
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<card>title 1</card>
<card>title 2</card>
</div>
I found the solution.
Create the cards data into a array of objects in the data instance
Use a v-for to loop through the cards
Create a method that capture the card clicked, create a projectSelected value in data
<button #click="showModal = !showModal,open(project)">Open</button>
captureProject(card) {
this.projectSelected = project;
},
Show the selected project inside the modal
{{ projectSelected .title }}
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/
I am new to Vue. When I use v-if, v-else-if, and v-else, the first two tags work well. But for v-else, it only change the context in {{}}.
html:
<div id="app">
<div v-if="isIf === 1">
isIf is 1：{{isIf}}
</div>
<div v-else-if="2">
isIf is 2：{{isIf}}
</div>
<div v-else>
isIf is not 1 or 2：{{isIf}}
</div>
</div>
js:
<script>
var app = new Vue({
el: '#app',
data: {
isIf: 1,
isShow: false
}
});
</script>
when I change the app.isIf=3 in console, it showed isIf is 2: 3. My last try is app.isIf=2, so it showed the context with last input. Any idea?
Your v-else-if condition is wrong - instead of
<div v-else-if="2">
it should be
<div v-else-if="isIf === 2">
Except for zero, any numerical value will be considered "true" in Javascripts. So your render logic is always around "v-if" and "v-else-if", it never reaches "v-else"
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>