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
Related
I have two input tags for uploading images and tow variables(imgFile1,imgFile2) in data section . I'm sure imgFile1 gets correct value on my console but when I upload second image, this images's value goes to wrong variable. The images d57f0.... in the picture below supposes to be in imgFile2. Why does it happen ?? Thank you so much .
html
<div class="img-field-container1">
upload img
<input type="file" class="input-img-field1" #change="uploadFile" accept="image/*" ref="img1">
</div>
<div class="img-field-container2">
upload img
<input type="file" class="input-img-field2" #change="uploadFile" accept="image/*" ref="img2">
</div>
data () {
return {
imgFile1:'',
imgFile2:'',
}
methods: {
uploadFile: function () {
var img_file1 = this.$refs.img1.files[0]
this.imgFile1 = URL.createObjectURL(img_file1)
console.log(imgFile1)→ correct value in console
var img_file2 = this.$refs.img2.files[0]
this.imgFile2 = URL.createObjectURL(img_file2)
console.log(imgFile2)→ correct value in console but updated into imgFile1
}
I solved problem by wrapping correctly
I have the following input
<input
type="text"
:disabled="disabledMoney"
v-model="packageForm.crime.forgeryCrimeSelected"
v-mask="{alias: 'currency', digits:0, min:minMoney, max:maxMoney}"
autofocus
/>
to which I assign the property max:maxMoney of data ();
This input is shown based on a radio button, so when selecting the radio button the input appears and with its correct max value, but if I try to change the max value in a method, the change no longer applies
in the method I just do
change(){
this.maxMoney = 6000 // Assigning new max
}
But it does not apply and stays with its initial value
What you need to do is use a computed value. This will re calculate everytime there is a change in state with the values involved.
Here is some reading from the docs: https://v2.vuejs.org/v2/guide/computed.html
Hey based on your comment, I would do something like this:
<input
type="text"
:disabled="disabledMoney"
v-model="packageForm.crime.forgeryCrimeSelected"
v-mask="{alias: 'currency', digits:0, min:minMoney, max:maxMoneyComp }"
autofocus
/>
computed: { maxMoneyComp(){ return packageForm.crime.forgeryCrimeSelected == 10000 ? 10000:25000; } }
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.
I want to create a custom attribute input-format
I can assign two values to the attribute that would enable me to clean the input string or to trim input string.
Like below:
For value clean:
Trying to achieve declaring as below
<input
type="text"
placeholder="enter text with illegal characters"
value.bind="dirtyString"
input-format= "format : clean"
/>
The above should result me with the below embedded into the input element:
<input
type="text"
placeholder="enter text with illegal characters"
value.bind="dirtyString | cleanString & updateTrigger:'blur'"
keypress.delegate="keypress($event)"
/>
Similarly for trim
<input
type="text"
placeholder="enter your name"
value.bind="Name"
input-format= "format : trim"
/>
should result in:
<input
type="text"
placeholder="enter your name"
value.bind="Name | trimString & updateTrigger:'blur'"
/>
where cleanString, trimString, are value converters and keypress function which are already declared as needed. I need help with creating custom attribute as I am not sure of getting the current value bound to an html input element and also reassigning that to have all the above value converters and a function.
Can anyone please help me on achieving this? Appreciate your input and help.
This is where I stand:
import * as au from "aurelia-framework";
#au.autoinject
#au.customAttribute("input-format")
export class InputFormat {
constructor(element: Element) {
this.element = element;
}
#au.bindable
format: string;
formatChanged(name: string, newValue: string, oldValue: string) {
// need to have case statements
switch(name){
case 'clean':
// to assign the relevant value converter and the 'value' is to be passed into
// this assigment should result something like below
// <input
// type="text"
// value.bind="Name | cleanString & updateTrigger:'blur'"
// keypress.delegate="keypress($event)"
// >
break;
case 'trim':
// to assign the relevant value converter the 'value' is to be passed into
// <input
// type="text"
// value.bind="Name | trimString"
// >
break;
default:
// to leave the assigment as is
break;
}
}
// the select list
element: Element;
val: any;
}
here is the link where I am trying to put things together:
sand box link
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()