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>
Related
I have the WC <m-form> witch is the wraper for my form and the input fields.
In the renderHTML() of m-form i do this:
renderHTML() {
this.loadChildComponents().then(children => {
Array.from(this.root.querySelectorAll('input'))
.filter(i => i.getAttribute('type') != "hidden").forEach(input => {
const label = this.root.querySelector(`label[for=${input.getAttribute("name")}]`)
const aInput = new children[0][1](input, label, { namespace: this.getAttribute('namespace') || ''})
aInput.setAttribute('type', input.getAttribute('type'))
input.replaceWith(aInput)
})
})
}
This wraps <input> and <label> in an <a-input> WC.
But when I want to do the same with
<input type="radio" id="gender1" name="gender" value="herr">
<label for="gender1">Herr</label>
<input type="radio" id="gender2" name="gender" value="frau">
<label for="gender2">Frau</label>
they are not in a group.
What can i do to get them grouped together but also in the <a-input>?
Here is the Code on the site and what got rendered out.
shadowDOM encapsulates CSS, HTML and behavior
Both you inputs are in shadowDOM. That is like putting them into 2 different IFRAMEs.
They have no clue another input exists
Remove shadowDOM
or, loads more work, add Events to make the inputs communicate with each other
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)
}
Using Vee-Validate, when using a custom validator along with the confirmed rule, the confirmed rule always fails validation. The custom validator is specified on the input field being confirmed like so:
<input type="password" placeholder="Password" data-vv-as="password" v-model="password" name="password" v-validate="'required|min:8|has_upper'" />
<input type="password" placeholder="Password" data-vv-as="confirm" v-model="confirmPassword" name="confirmPassword" v-validate="'required|confirmed:password'" />
Here is my Vue instance:
(function (Vue, VeeValidate) {
VeeValidate.Validator.extend('has_upper', {
getMessage: function (field) {
return 'The ' + field + ' must contain an upper case letter';
},
validate: function (value) {
return /^(?=.*[A-Z]).+$/.test(value);
}
});
Vue.use(VeeValidate);
var enroll = {
el: "#app",
data: {
password:'',
confirmPassword: ''
}
}
var app = new Vue(enroll);
})(Vue, VeeValidate)
The custom validator for the password field is triggering as expected, however, as mentioned the confirmed rule is always failing for the confirm password model.
Recently in Vee-Validate (2.1.0 and greater), they've changed how parameters work for these. Now, the target of confirmed has to be a ref, so this will work:
<input type="password" ref="password" name="password" v-validate="'required'" />
<input type="password" v-model="confirmPassword" name="confirmPassword" v-validate="'confirmed:password'" />
The only change you really need to make is to add ref="password" to your password input.
See here for the author talking about this change: https://github.com/baianat/vee-validate/issues/1415
So far I don't see any changes in the documentation, but I assume it will come.
Working example: https://codesandbox.io/s/km4lw12823
Is it possible to pass v-model value to another component ? I have HTML code is like below
<div id='example-3'>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
</div>
vue.js code is like below
data: {
checkedNames: []
}
I can use this v-model value in same component using below code.
<span>Checked names: {{ checkedNames }}</span>
But how can I use v-model value in another component ?
You can emit events with the v-model value each time one of the checkboxes is ticked:
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames" #change="onChange">
<label for="mike">Mike</label>
methods: {
onChange () {
this.$root.$emit('checkbox.changed', this.checkedNames)
}
}
Listen for the event in another component:
// my-component.js
created () {
this.$root.$on('checkbox-changed', payload => {
// do something with payload...
}
}
In the context of components, you should always be declaring the data property as a function, too.
data () {
return {}
}
Your other option is using a state management strategy, i.e.
Vuex, or similar.
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.