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,'')
Related
I need to capitalize the input data of the model user.full_name. and if possible, should be written only in Latin letters
Vue js Uppercase
<p-input :value="value" #input="$emit('input', $event)" />
<UIFormInput
v-model="user.full_name "
class="w-full"
label="Full name"
/>
I have a lot of inputs. i need to uppercase some of them. more precisely the model is user.full_name. so I need help
You just need to change this.value. And with the help of the npm package dzcpy/transliteration, you can transform the input letters to their latin counterparts.
new Vue({
el: '#app',
template: `<input :value="value" #input="onChange" />`,
data() {
return {
value: ''
}
},
methods: {
onChange(evt) {
this.value = transliterate(evt.target.value.toUpperCase());
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script
async
defer
src="https://cdn.jsdelivr.net/npm/transliteration#2.1.8/dist/browser/bundle.umd.min.js"
></script>
<div id="app"></div>
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.
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>
After get API call with a string input attached, I get the result alright. The problem I have is incorporating it to my frontend. I have tried a lot of solutions that I found online but nothing working and cannot understand. So far I have done this:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type = text/javascript src = https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<form action="http://127.0.0.1:1880/" target="_self">
<label for="request"><strong>Please insert the input here:</strong></label><br>
<input type="text" id="request" name="input"><br>
<button v-on:click="getOverview($event)">Submit</button>
</form>
<h1 id="results" v-for="overview in overview">
{{overview}}
</h1>
<script type = text/javascript >
new Vue({
el: "#results",
data() {
return {
overview: []
}
},
methods: {
async getOverview(event) {
try {
const {data:{json:{sub_regions}}} = await axios.get('http://127.0.0.1:1880/');
console.log('results data', sub_regions);
this.overview = sub_regions;
}
catch (error) {
console.log(error);
return [];
}
}
},
created(){
this.getOverview()
}
})
</script>
</body>
</html>
I am a bit lost with javascript as I am new to it, all kinds of help are welcome,
Thank you in advance! :)
EDIT: the file I get from the API is JSON
Looks as though you are trying to call a method outsides of the vue app itself.
You have the el: "results" but you are trying to invoke a vue method within your button outside of its context.
Try something like this:
<div id="results">
<form action="http://127.0.0.1:1880/" target="_self">
<label for="request"><strong>Please insert the input here:</strong></label><br>
<input type="text" id="request" name="input"><br>
<button v-on:click="getOverview($event)">Submit</button>
</form>
<h1 v-for="overview in overview">
{{overview}}
</h1>
</div>
Some problems here...
You're including Vue twice (https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js and https://unpkg.com/vue/dist/vue.js). Don't do that
You cannot use a v-for directive on your root Vue element
Your form is outside your Vue root so you won't be able to use v-on
Your submit button will submit the form normally. There's nothing stopping that from happening
Your input value is never used. You should try binding it to a data property
Change your HTML to
<div id="results">
<form action="http://127.0.0.1:1880/" #submit.prevent="getOverview">
<label for="request">
<strong>Please insert the input here:</strong>
</label>
<br>
<input type="text" id="request" name="input" v-model="input">
<br>
<button type="submit">Submit</button>
</form>
<h1 v-for="item in overview">
{{ item }}
</h1>
</div>
and in your JS, replace data with
data: () => ({
overview: [],
input: ''
})
Then you can use this.input if you ever need to get the value the user types in.
Here's an example using a placeholder API
new Vue({
el: "#results",
data: () => ({
overview: [],
input: ''
}),
methods: {
async getOverview ($event) {
let url = 'https://jsonplaceholder.typicode.com/users'
if (this.input) {
url += `/${encodeURIComponent(this.input)}`
}
try {
const { data: sub_regions } = await axios.get(url)
console.log('results data', sub_regions);
this.overview = Array.isArray(sub_regions) ? sub_regions : [ sub_regions ]
} catch (error) {
console.log(error);
this.overview = []
}
}
},
created() {
this.getOverview()
}
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<div id="results">
<form action="http://127.0.0.1:1880/" #submit.prevent="getOverview">
<label for="request">
<strong>Please insert the user ID here:</strong>
</label>
<br>
<input type="number" id="request" name="input" v-model.number="input">
<br>
<button type="submit">Submit</button>
</form>
<h1 v-for="item in overview">
{{ item.name }}
</h1>
</div>
Other notes:
Avoid using the same variable name for your array and iterable.
Bad - v-for="overview in overview"
Good - v-for="thing in things"
VueResource is long dead. Avoid using it or at least update to the latest version (1.5.1)
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.