Develop Reference

Vue JS taking input dynamically inside v-for

Hi I am trying to taking input in this fashion:
itemPrices: [{regionId: "A", price: "200"},{regionId: "B", price: "100"}]
As the user presses add button new input fields get added.
For this I have taken an empty array=> itemPrices: [], inside vue app data.
Now Inside table element I have this code:
<vs-tr v-for="n in num" v-bind:key="n">
<vs-td
><vs-input
v-model="itemPrices[n].regionId"
placeholder="Region Name"
/></vs-td>
<vs-td>
<vs-input
placeholder="price"
v-model="itemPrices[n].price"
/>
</vs-td>
</vs-tr>
Here 'num' is just an integer which decides how many rows should be there. But this is not working... What is a possible solution for this task?

If I understood you correctly, you set num as itemPrices array length:
new Vue({
el: '#demo',
data() {
return {
itemPrices: []
}
},
computed: {
num() {
return this.itemPrices.length
}
},
methods: {
addItem() {
this.itemPrices = [...this.itemPrices, {regionId: "", price: ""}]
}
}
})
<link href="https://unpkg.com/vuesax#4.0.1-alpha.16/dist/vuesax.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vuesax#4.0.1-alpha.16/dist/vuesax.min.js"></script>
<div id="demo">
<vs-button #click="addItem">add</vs-button>
<vs-tr v-for="(n, i) in num" :key="n">
<vs-td>
<vs-input
v-model="itemPrices[i].regionId"
placeholder="Region Name"
/>
</vs-td>
<vs-td>
<vs-input
placeholder="price"
v-model="itemPrices[i].price"
/>
</vs-td>
</vs-tr>
</div>

If you are sure “num” is a filled array I think you can use the following code:
<vs-tr v-for="n in num" v-bind:key="n">
<vs-td
><vs-input
v-model="n.regionId"
placeholder="Region Name"
/></vs-td>
<vs-td>
<vs-input
placeholder="price"
v-model="n.price"
/>
</vs-td>
</vs-tr>
Since n is a representation of each instance inside your array.
Although, you should provide you JS code as well. This way people here get a better understanding of what is going on. For example, I can’t see what “num” looks like.

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 disable button until email validated in Vuejs?

new Vue({
el: '#app',
data: {
email: ''
},
computed: {
isEmailValid() {
return '/^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/'.test(this.email)
},
isDisabled: function() {
return !this.email || this.isEmailValid;
}
}
})
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<p>
<input class="input-mobile-email" type="text" placeholder="Your email" id="email" v-model="email" name="email" />
</p>
<button :disabled='isDisabled'>Send Form</button>
</div>
I am trying to disable the button until the email address is validated. So for that I have taken a computed property and written a function. And then I am trying to pass the function's name to isDisabled.
But there is an issue with the validation and the button doesn't get enabled, even if a correct email address is entered.
This is a jsfiddle where I tried the functionality https://jsfiddle.net/k69cr0sf/2/

There are two problems with your code
A regex must not be enclosed in quotes ''
Your isDisabled() function returns the wrong value, because it returns true if this.isEmailValid == true which is obviously wrong.
You can also simplify your logic, as your regex won't match an empty string. Thus your isDisabled() can simply return the negated result of the regex test, ie return !/.../.test(this.email)
new Vue({
el: '#app',
data: {
email: ''
},
computed: {
isDisabled: function() {
return !/^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(this.email)
}
}
})
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<p>
<input class="input-mobile-email" type="text" placeholder="Your email" id="email" v-model="email" name="email" />
</p>
<button :disabled='isDisabled'>Send Form</button>
</div>
PS: You can add external scripts also to your code snippets, if you click on Add External scripts and input the url. Thus for simple cases, there is typically no need to link to external jsfiddles and you can keep your questions self-contained.

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>

How to check if a model is empty before changing it?

I have an input that needs to use a model, depending on the value of the model.
This is basically what I need:
<input v-if"modelOne == ''" v-model="modelOne">
<input v-else v-model="modelTwo">
Except, as I type in the input, modelOne is no longer an empty string, so the v-model changes to modelTwo.
How can I make it only check the value of modelOne when the input is loaded, and not check otherwise?
Note: this is a simplified version of a dynamic list of inputs. Every input will be using a different model, row.modelOne / row.modelTwo, and the list of inputs will change.

You should use watch property to have the old and the new value and add a boolean item in your data object as follows :
data(){
return{
isModelOne:false,
modelOne:'',
}
}
watch property :
watch:{
modelOne(newval,oldval){
oldval==''?this.isModelOne=true:this.isModelOne=false;
}
}
template :
<input v-if="isModelOne" v-model="modelOne">
<input v-else v-model="modelTwo">
Another approach which could be helpful is to use .lazy modifier, which will update the bound item after blurring the input:
// ignore the following two lines, they just disable warnings in "Run code snippet"
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#app',
data() {
return {
modelOne: '',
modelTwo: 'model two'
}
}
});
.two{
border-radius:20px;
border:2px solid #ff55aa!important;
}
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app" class="container">
<input v-if= "modelOne == ''" v-model.lazy="modelOne" class="form-control"/>
<input v-else v-model="modelTwo" class="form-control two" />
<input value="three" class="form-control"/>
</div>