How to use v-model value in components - javascript

I created a vue component that uses v-model value:
Vue.component('dynamic-component', {
props: ['message'],
template: '<p>The message: {{message}}</p>'
});
This is my vue instance
var vm = new Vue({
el: '#app',
data: function() {
return {message: ''}
},
});
This is the Html:
<div id="app">
<textarea v-model="message" placeholder="add multiple lines"></textarea>
<p>
<dynamic-component v-show="message"></dynamic-component>
</p>
</div>
The {{message}} value doesn't appear in the placed template. What should I do?
Fiddle

You need to actually pass the message into that component, like this:
<div id="app">
<textarea v-model="message" placeholder="add multiple lines"></textarea>
<p>
<dynamic-component :message="message" v-show="message"></dynamic-component>
</p>
</div>
Fiddle.

Related

Vuejs v-model.trim skips spaces

I want to write reactive fields with name without spaces, but there was a problem with v-model.trim, such code doesn't filter spaces, what's the problem?
My Vue page
<template>
<div>
<span>Name: {{title}}</span>
<input type="text" v-model.trim="title">
</div>
</template>
<script>
export default{
data(){
return{
title:''
}
}
}
</script>
I enter "H e l l o", and I get it, but I want "Hello"
If you want to prevent spaces in the input. You can prevent by using #keydown.space.prevent.
Working Demo :
new Vue({
el: '#app',
data() {
return {
title: ''
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<span>Name: {{title}}</span>
<input type="text" #keydown.space.prevent v-model="title"/>
</div>
Trim only filter spaces at start and end.If you want remove all spaces,you can use const removeSpaces = (str)=>str.replace(/\s+/g,'')

How to handle v-model in dynamic input fields

I have a form where the user has the option to click an "Add" button and input content into new fields. I've currently dynamically generated the v-model for the fields, but I realized I need to register/return each of them in the setup function to use them.
How do I generate and register/return v-models for the different input fields if I don't know how many fields the user will decide to add?
<div
v-for="(content, i) in contentFields"
:key="i"
>
<div>Content {{ i }}</div>
<q-input
:v-model="`contentName_` + i"
outlined
type="text"
dense
/>
</div></div>
Take a look at following snippet with simple dynamic v-models pls:
new Vue({
el: "#demo",
data() {
return {
contentFields: [{name: '', desc: ''}]
}
},
methods: {
addInput() {
let newI = this.contentFields.length
this.contentFields.push({name: '', desc: ''})
},
setD() {
console.log(this.contentFields)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<button #click="addInput">add</button>
<div v-for="(content, i) in contentFields" :key="i">
<div>Content {{ i }}</div>
<input
v-model="content.name"
outlined
type="text"
dense
#change="setD"
/>
<input
v-model="content.desc"
outlined
type="text"
dense
#change="setD"
/>
</div>
</div>

How to extract the value of textbox (V-Model)?

https://codepen.io/Maximusssssu/pen/KKzLzxg
<td><input class="input" v-model="user.name" /></td>
If you click the link above, is it possible to extract a specific text value (such as a,b,c) in the textbox using .getElementById or other method? This is a very weird input textbox.
You have access to the inputs value as the input and user.name have a two-way binding through v-model:
new Vue({
el: "#app",
data: {
user: {
name: ""
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input v-model="user.name" /> {{ user.name }}
</div>

VueJS: How to use a binding value within a for loop of an array?

I have an array of strings:
myList: ['First item', 'Second item']
I want to add a third, and more. I have a method that pushes an empty string onto the array:
this.myList.push('')
(Using .push on a Vue object is okay)
It now looks like this:
['First item', 'Second item', '']
Which I can now edit. However, it’s not bound to the array. When another item is added, the value is lost and it returns to an empty string.
var app = new Vue({
el: '#app',
data: function() {
return {
myList: ['First item', 'Second item']
}
},
methods: {
remove(index) {
Vue.delete(this.myList, index)
},
add() {
this.myList.push('')
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.17/dist/vue.js"></script>
<div id="app">
<p v-for="(listItem, index) in myList" class="my-2 field" :key="index">
<input
type="text"
:value="listItem"
:key="index"
/>
<button #click.prevent="remove(index)">✕</button>
</p>
<p>
<button #click.prevent="add()">Add</button>
</p>
</div>
Tried the following:
As above:
<input
type="text"
:value="listItem"
:key="index"
/>
Without key, same:
<input
type="text"
:value="listItem"
/>
With (incorrect) binding, doesn’t echo value:
<input
type="text"
:value="myList[index]"
/>
Using v-bind:
<input
type="text"
v-bind:value="listItem"
/>
And also with a key:
<input
type="text"
v-bind:value="listItem"
v-bind:key="index"
/>
I’m positive that I’m going about this the wrong way. Hopefully you can see the behaviour that I’m trying to achive.
Update Have just tried using a v-model, but I get this error:
You are binding v-model directly to a v-for iteration alias. This will not be able to modify the v-for source array because writing to the alias is like modifying a function local variable. Consider using an array of objects and use v-model on an object property instead.
Is it perhaps easier to have an array of objects with one value?
you should use v-model to have a 2-way binding on your input and you have to use myList[index] cause v-bind directive requires an attribute value and not a v-for alias (as listItem). Try this:
var app = new Vue({
el: '#app',
data: function() {
return {
myList: ['First item', 'Second item']
}
},
methods: {
remove(index) {
Vue.delete(this.myList, index)
},
add(listItem) {
this.myList.push('')
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.17/dist/vue.js"></script>
<div id="app">
<p v-for="(listItem, index) in myList" class="my-2 field" :key="index">
{{myList[index]}}
<input
type="text"
v-model="myList[index]"
/>
<button #click.prevent="remove(index)">✕</button>
</p>
<p>
<button #click.prevent="add()">Add</button>
</p>
</div>
The input is not bound with the array elements. Try this.
var app = new Vue({
el: '#app',
data: function() {
return {
myList: ['First item', 'Second item']
}
},
methods: {
remove(index) {
Vue.delete(this.myList, index)
},
add() {
this.myList.push('')
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.17/dist/vue.js"></script>
<div id="app">
<p v-for="(listItem, index) in myList" class="my-2 field" :key="index">
<input
type="text"
v-model="myList[index]"
:key="index"
/>
<button #click.prevent="remove(index)">✕</button>
</p>
<p>
<button #click.prevent="add()">Add</button>
</p>
</div>
JSFiddle : https://jsfiddle.net/32d41epw/2/

Binding v-show to component data

I'm trying to use Vue.js to hide/show an element of my page based on a checkbox's value. Here's what I have so far:
<div id="myDiv" v-show="????">
<!-- stuff to be hidden -->
</div>
...
Vue.component('tab-gar-var-cb', {
props: ['cmp_name','cmp_checked_init', 'cmp_garantie_id'],
data: function(){
return {
'cmp_checked' : ''
};
},
template:`
<span>
<input :name="cmp_name" type="hidden" value="0">
<input :name="cmp_name" type="checkbox" value="1" v-model="cmp_checked">
</span>
`,
mounted: function(){
this.cmp_checked = (this.cmp_checked_init == '1');
}
});
new Vue({
el: "#vue-rptrenouedit-root"
});
Basically, what I'd like to do is bind the 'v-show' attribute to the 'cmp-checked' data of my tab-gar-var-cb component. However, I can't figure out how to do it. Anyone knows how to do it? Thanks in advance.

Categories

Resources