new Vue({
el: "#app",
data: function() {
return {
placeholder: 'Hello world'
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="container" id="app">
<h3>Search</h3>
<input type="text" placeholder="{{placeholder}}">
</div>
I can't seems to solve this problem.
Why the placeholder text is not show up inside the "input" textbox?
Please use v-bind directive to bind the attribute value as you can not use mustaches inside the html attribute.
Please replace your code with below syntax.
<input type="text" :placeholder="placeholder">
Related
Im usign vue js for validate form before submit.
This code start a new Vue getting data from the ID = app:
const app = new Vue({
el:"#app",
data:{
text: null
}
I want create a custom attribute named form-number and get data usign my
attribute and not the div.
Example:
Change this
<form id="app" method="post">
<input type="text" v-model='text'>
</form>
For this
<form form-number="1" method="post">
<input type="text" v-model='text'>
</form>
const app = new Vue({
el:"form-number='1'",
data:{
text: null
}
In Vue the template is not to be read - inputs are possible through bindings (like v-model).
See this snippet:
const app = new Vue({
data: {
formNumber: 1,
text: ''
}
})
app.$mount('[myCustomAttribute="mounthere"]')
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div myCustomAttribute="mounthere">
<form :form-number="formNumber" method="post">
<label for="text1">
From{{ formNumber }} input:
<input id="text1" type="text" v-model="text" />
</label>
</form>
{{ text }}
</div>
formNumber is also defined in the data attribute and bound to the form-number attribute, which also appears in the HTML.
EDIT
el: "#app" is just a convention for the basic Vue app. You can choose where to mount the app by any valid selector - like [myCustomAttribute="mounthere"] also works.
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>
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>
I would like to bind v-model to a specific array element like the following, is this possible?
<input v-model='item[1]' />
Thanks
Yes, that is the right way:
var vm = new Vue({
el: '#vue-instance',
data: {
items: ["Item1", "Item2"]
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<div id="vue-instance">
<input v-model='items[0]'/>
<div v-for="item in items">
{{item}}
</div>
</div>
I am trying to learn vue.js and javascript, so this is probably easy for those who already have walked the path... so please show me the way...
I want to have a universal function that passes parameters so...
in HTML
I have a call to function with div id parameter
<button #click="showdiv('user_likes')" type="button" class="btn btn-default">+</button>
In vue all the div elements are by default false.
This is my function in Vue.js methods
changediv: function(data){
data==false ? data=true : data=false;
},
All hints are appreciated
Button without a method
To complement the existing answer, since this case is a simple toggle, you can reduce the amount of code by getting rid of the method showDiv entirely. This should not be used if you have more complex logic since it could compromise readability: https://jsfiddle.net/8pLfc61s/
HTML:
<div id="demo">
<button #click="showParagraph = !showParagraph">Toggle paragraph with button</button>
<p v-if="showParagraph">Hello!</p>
</div>
JS
var demo = new Vue({
el: '#demo',
data: {
showParagraph: false
}
})
Checkbox with v-model
Another cool trick is to use a checkbox with v-model, although in this case the amount of markup is increased, so probably not a worthy tradeoff: https://jsfiddle.net/v09tyj36/
HTML:
<div id="demo">
<label class="button">
Toggle Paragraph with checkbox
<input type="checkbox" v-model="showParagraph">
</label>
<p v-if="showParagraph">Hello!</p>
</div>
JS
var demo = new Vue({
el: '#demo',
data: {
showParagraph: false
}
})
Here's a fiddle that replicates what you're trying to to: https://jsfiddle.net/9wmcz2my/
HTML:
<div id="demo">
<button #click="showDiv('showParagraph')">Click me</button>
<p v-if="showParagraph">Hello!</p>
</div>
JS
var demo = new Vue({
el: '#demo',
data: {
showParagraph: false
},
methods : {
showDiv: function(param){
this[param] = !this[param]
},
}
})