Hello I am trying to update a photo with a onchange event i can do that with the following code:
<input type="file" accept="image/*" onchange="document.getElementById('i-logo').src = window.URL.createObjectURL(this.files[0]);"> <br />
But when try to use v-on like this:
<input type="file" accept="image/*" v-on:change="prepareLogo(files[0])"> <br />
prepareLogo: function(a) {
console.log(a)
I get the following error:
"TypeError: Cannot read property 'files' of null"
How can do this?
Thanks
Don't pass an argument to it. The event will be passed to your function automatically:
v-on:change="prepareLogo"
//
prepareLogo: function (e) // hydrated {
console.log(e)
}
Related
I'm currently working on a react native project using expo.
I have an input
<Input type="text" onChange={this.onValueChange} />
When a change is made in the type I can console.log like so:
onValueChange(event) {
console.log(event.nativeEvent.text);
}
However I need to pass an additional variable to this method so I can identify it.
I tried this:
onValueChange(event, inputArea) {
console.log(event.nativeEvent.text);
}
And to pass it the variables I did this:
<Input type="text" onChange={this.onValueChange(event, 'nine')} />
Event now does nto function. I also tried:
<Input type="text" onChange={this.onValueChange('nine')} />
My outcome is that I need to capture the input text AND pass a variable.
You can use an high order function.
onChangeHandler = (foo, bar) => event => {
console.log(foo) // should display nine
console.log(bar) // should display whatever
// handle your event with your native variable
}
<Input type=« text » onChange={this.onChangeHandler(‘nine’, ‘whatever’)} />
Just saw how to do this.
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
Vue.js 2 - I am trying to bind form inputs but I always get the erro message ( on all inputs ..)
v-on:model="form.email" expects a function value, got undefined
<form id="registrationForm">
<div class="form-group">
<input type="email" name="email" id="email" #model="form.email" placeholder="enter your email address">
</div>
<button #click="sendRegistration" type="submit" class="btn btn-primary btn-gradient submit">SEND</button>
</form>
and the script
data: function() {
return {
form: {
...
email: '',
...
}
}
},
methods: {
sendRegistration: function() {
console.log('sending form')
return false
}
},
You're getting some things mixed up. Attributes starting with v-on:, often abbreviated as #, are used to register event listeners on elements. #click="sendRegistration" will for example register the sendRegistration method defined on your Vue instance as a handler for that element's click event.
What you're trying to accomplish has nothing to do with event handling. The attribute you need is called v-model and binds an <input>'s value to a value saved on your Vue instance.
<input type="email" name="email" id="email" #model="form.email">
should be
<input type="email" name="email" id="email" v-model="form.email">
I've read that it is not good practice to pass the dom element so I come up with such view:
<div>
<input #message placeholder="message" (keyup.enter)="add(message.value)" />
<button (click)="add(message.value)">Add+</button>
<p>
the message is {{ message.value }}
</p>
</div>
As you can see I am passing the message.value to my add method
add(message: string) {
this.message = message;
console.log(this.message);
this.messengerService.add(this.message);
}
But how can I clear the so inside add method so input #message won't containg any text? I tried message = null; but it is does not work.
If you extend your response with (blur)= , you can reset the input field as follows:
<div>
<input #message placeholder="message (keyup.enter)="add(message.value)" (blur)="add(message.value); message.value='' " />
<button (click)="add(message.value)">Add+</button>
<p>
the message is {{ message.value }}
</p>
</div>
Note added: (blur)=add(message.value); message.value=''
you can use ngModel instead of #elem.value :
<div>
<input placeholder="message" [(ngModel)]="message" (keyup.enter)="add(message)"/>
<button (click)="add(message)">Add+</button>
<p>
the message is {{ message }}
</p>
</div>
and then clear the input value by adding
this.message = null;
in add function. This will work :
add(message: string) {
this.message = message;
console.log(this.message);
this.messengerService.add(this.message);
this.message = null;
}
your message.value attribute in view was not mapped to this.message in modal
Why to use extra Parameter when angular provides two way data binding in the form of [(ngModel)]. you can use ngModel to get notified both side on view as well as in the class/controller. no need to pass extra parameter along with method call. so you can use this simplified approach here
<div>
<input placeholder="message" [(ngModel)]="message" (keyup.enter)="add()"/>
<button (click)="add(); message = null">Add+</button>
<p>
the message is {{ message }}
</p>
</div>
message: string = null;
add() {
console.log(this.message);
// this.messengerService.add(this.message);
}
here is working demo for the same Working Plunker
The ngModel input property sets the element's value property and the ngModelChange output property listens for changes to the element's value. The details are specific to each kind of element and therefore the NgModel directive only works for elements, such as the input text box.
I have a set of input fields that are used to set search params, passed to the controller via knockout and ajax upon pressing the 'search' button.
Each input is bound to a property in a viewModel - each one is a ko.observable().
I have code bound to the keyup event for these fields that will invoke the same search operation when the return key is pressed.
In Chrome, this works fine, but in IE(11) this is never passed!
I have also noted that if I press the tab key to go to the next field, and THEN press return, the search parameter I expect is now populated.
Any ideas? at my wits end...
How do I do the same as pressing the tab key in code, without pressing the tab key?
I think IE's handling of the .change() event in jquery might be different to everyone else...
edited to include sample code - js:
var searchVm = function () {
var self = this;
self.reference = ko.observable("");
self.postCode = ko.observable("");
self.description = ko.observable("");
self.doSearch = function () {
var date = {
Ref: self.reference(),
PostCode: self.postCode(),
Desc: self.description()
};
// do the ajax call to controller
// ... etc ...
}
}
$('.searchField').keyup(function(e) {
if (e.which===13) {
$('#btnSearch').click();
}
});
the page:
<div class='indexRow'>
<label>Reference:</label>
<input type='text' class='searchField' data-bind="value: reference" />
</div>
<div class='indexRow'>
<label>PostCode:</label>
<input type='text' class='searchField' data-bind="value: postCode" />
</div>
<div class='indexRow'>
<label>Description:</label>
<input type='text' class='searchField' data-bind="value: description" />
</div>
<button data-bind='click: doSearch'>Search</button>
I have an adapter which retrieves a JSON object, but strangely everything works fine if the form uses only button, but if I put <input type="text"> then WL.Client.invokeProcedure's callbacks ('onSuccess' or 'onFailure') or not called...
Adapter Code:
intranetId="my-email-address";
var invocationData = {
adapter : 'RoleAdapter',
procedure : 'getRoles',
parameters : [intranetId,"role"]
};
WL.Client.invokeProcedure(invocationData, {
onSuccess : function(res){ console.log('win', res); },
onFailure : function(res){ console.log('fail', res); }
HTML Form:
<div id="welcome">
<form action="#welcome2" onsubmit="getRole()">
<input type="text" id="userId">
<br/>
<input type="password" name = "password">
<br/>
<input type="submit" value="Login">
</form>
</div>
I am able to get value of userId, and even if I hardcode it in getRole() same problem...
edit:
On changing the html form to this
<div id="welcome">
<form action="#welcome2" onsubmit="return getRole()">
<input type="submit" value="go">
</form>
</div>
I tried debugging, but cudnt get anything.
edit2:
I fixed it!
So basically, In html form you cannot add 'name' property to an input element when you are using with worklight. Don't know why it is so..
This worked for me...
Full example here: https://stackoverflow.com/a/17852974/1530814
index.html
<form onsubmit="submitName()">
First name: <input type="text" id="firstname"/><br>
Last name: <input type="text" id="lastname"/><br>
<input type="submit" value="Submit Name"/>
</form>
main.js
function wlCommonInit(){
}
function submitName() {
var invocationData = {
adapter : 'exampleAdapter',
procedure : "showParameters",
parameters : [$('#firstname').val(),$('#lastname').val()]
};
var options = {
onSuccess : success,
onFailure : failure
};
WL.Client.invokeProcedure(invocationData, options);
}
function success() {
alert ("success");
}
function failure(res) {
alert ("failure");
}