I have an array of names, and if a user try to update one of them and is duplicate, I want to do something (error message) The problem is that is always duplicate. Pname will be changed on every keypress. I am not sure how to store the initial array and to compare with it.
<input
v-model="Pname"
type="text"
class="form-control"
/>
for(let element of this.customer_names){
if(this.Pname == element.name){
duplicateValue = +1;
}
}
You can do something as simple as:
if(this.customer_names.indexOf(this.Pname) != -1) {
// there is a duplicate somewhere
}
Put that code in your change/key-up event listener
You can use #blur like this:
<input
v-model="Pname"
type="text"
class="form-control"
#blur="findDuplicate"
>
function findDuplicate () {
if(this.customer_names.indexOf(this.Pname) != -1) {
// There is a duplicate
}
}
So, by this when you click outside, after you are done with typing, it will run that findDuplicate function.
Related
I am looking for the command in a program that filters only when 3 letters are entered. Does anyone know what command or code I need to look for to find this?
Maybe it's also a Vue-Command, because my program is written in Vue.js.
Thank you
Pass the search input to a function first then validate the input. If passes the validation, proceed with searching.
Assuming this is your search input
<input v-model="searchInput"/>
Add an input event handler
<input v-model="searchFor" #input="searchHandler"/>
Then validate the search input with searchHandler method
new Vue({
methods: {
searchHandler (text) {
if(text.length > 2){
// Write your code on here
}
}
}
})
You can make use of debouncing to perform some functionality after some time, here you can also add a condition to check for the length of the input and then execute the logic.
const input = document.getElementById("myInput");
function callApi() {
if(input.value.length >= 3) {
console.log("Hello JS")
}
}
function debounce( callback, d ) {
let timeout;
return function() {
clearTimeout(timeout);
timeout = setTimeout( callback, d );
}
}
myInput.addEventListener(
"keyup",
debounce(callApi, 500 )
);
<label for="myInput">Type something in!</label>
<input id="myInput" type="text">
I don't know where it went wrong in here.
gets the desired number of textarea
<input type="number" min="0" v-model="columnNum">
<button #click="addTextArea(columnNum)">ok</button>
then push it to an array inside another array
addTextArea(a){
var colArray = [];
for(var i=1; i<=a; i++){
colArray.push({col_num : i , description : "edit me"})
}
this.all.col = colArray;
},
and display it like this
<textarea v-for="textareaCol in all.col" type="text" class="form-control" v-model="textareaCol.description"></textarea>
it doesnt work the first time you click 'ok', but if you try to input another value after you click 'ok', it triggers the function and run it. it seems that its not passing the value when it triggers the addTextArea function
I am facing a problem with my page with VueJS. It's a page for different translations of the website. It has a dropdown on the top for the language selection that once switched will update the fields with the current language.
The problem starts when it loads, because my form is like this:
<form id="trForm">
...
<input type="text" name="header_title" class="form-control" v-model="translations.header.header_title" />
...
</form>
It's trying to access these attributes before the method returns any data, but somehow it will still show the data once it is complete, but it becomes troublesome when I try to switch the language, it won't because of this problem and also, if I do the following:
<form id="trForm">
...
<input type="text" name="header_title" v-if="translations.header" class="form-control" v-model="translations.header.header_title" />
...
</form>
on each field, those that aren't populated will display no field at all for a new input value. I tried something like translations.features || '', but no success.
I also tried to put on the parent block a condition that if the loading is false will display the form, but since the page is loaded first than the method is executed, it will always be false for the first microsecond.
methods: {
fetchTranslations(e) {
let vm = this;
vm.loaded = false;
$.get('/ajax/admin/translations', { 'locale': e }).done((data) => {
if (data.success) {
vm.translations = JSON.parse(data.translations.translation);
vm.loaded = true;
} else {
toastr.error('Something went wrong');
}
});
},
Please, what do I do? It'd be good to show the form after there is data.
Introduce a new variable, e.g. loaded that defaults to false
Use this variable as a v-if condition on the form
In the callback of your data fetch, set loaded to true.
I would like to do something like this:
<input type="text" value={ value1 } >
<input if={ value1 != ''} type="text">
So, adding to DOM the second input when the first input has any value different than empty. I know 2-way data binding is not supported by Riot.js
I have tried to do the following:
<input ref="first" type="text" >
<input if={ this.refs.first.value != '' } type="text">
But it does not work.
You are correct, Riot does not do 2-way data binding for reasons I'll leave to the reader to research. It's fascinating stuff, but in my opinion, most web development can be made drastically simpler by following a few simple patterns. Riot is great for this reason. Simply put, the tag is just markup with event listeners that can update the tag.
<my-tag>
<input name='username' type='text' onKeyup={ checkVal } value={ opts.val }>
<input if={ usernameEntered } name='password' type='password'>
<script>
this.checkVal = (event) => {
this.usernameEntered = event.target.value !== ''
// this.update() is implicitly called in event listeners
}
</script>
</my-tag>
In your case (I don't know your exact use case), you may want to populate the first input element with a value passed into the tag (opts.val). Then we can assign some variable (usernameEntered) in an event listener (checkVal) and update the tag.
See Riot JS Guide for more detailed examples
i would like to know the syntax for removing a row which was added by appendchild.
There is also a removechild, but I am not sure how to operate.
<input type="button" id='submitlink' value="ADD_AGENDA" onClick="generateRowAgenda()" name="AGENDA"/>
<input type="button" id='submitlink' value="" onClick="removeRow()" name="AGENDA"/>
<script language="">
function generateRowAgenda() {
var temp ="<p><input type='text' class='textinputagenda' name='MM_AGENDA[]'></p>";
var newdiv = document.createElement('AGENDA');
newdiv.innerHTML = temp;
var yourDiv = document.getElementById('AGENDA');
yourDiv.appendChild(newdiv);
}
function removeRow(){
yourDiv.appendChild.deleteRow(newdiv);
}
</script>
<br>
<div id="AGENDA" align="center"></div>
That would be:
function removeRow(element){
element.parentNode.removeChild(element);
}
removeRow(newDiv);
That is, the removeChild method actually belongs to the element's parent, so you need to reference the parent first (by using parentNode) and then call the method removeChild over the newDiv element.
Also, you have two elements with the same id: submitlink. And that is not good.
If you rename your element, you could add a listener that call the removeRow function.
<input type="button" id='doremove' value="" onClick="removeRow()" name="AGENDA"/>
(Now the id is doremove)
Now do something like this to make the removeRow function to be executed on click:
document.getElementById('doremove').addEventListener('click', function(e) {
removeRow(newDiv);
});
Here is an example on jsfiddle: http://jsfiddle.net/5TmQC/
You'll notice that remove only works with one agenda item. You want to work with several agendas?
Try this then: http://jsfiddle.net/5TmQC/1/
Almost same code, but this one can delete several, in order by using pop()