When updating an Input using this.values.input_name = 'some value' from a child component or change by javascript in the child custom component, the new value is displayed correctly in the input on the parent, but not updated on save. If values are changed manually, everything works as expected.
Is there a way to call an onchange event for inputs on the parent component, from the child?
Could you help me?.
Thanks.
The code for updating the input value is:
this.$store.dispatch('stageValue', { field: '', value: '' });
I can solve this thanks to this answer
Related
I'm tring to test a component using svelte testing library.
The component has an input tag, whose value is bound (using bind:) to a state variable, and that state variable dictates the text of a title.
So when you change the value of the input tag, it changes the text in the title.
I set up a unit test with svelte testing library, and use fireEvent to change the value of the input tag, but upon asserting the text in the title, it is not changed. It is as if the input tag value changes, but the svelte component state does not update.
Why does the state not change and the title not update? Is there something extra I have to do to get it to update?
Codesandbox repro (run test cases to see problem): https://codesandbox.io/s/xnxjo
A couple things:
When you use bind:value on an input component in Svelte, Svelte attaches an input event listener to know when to update the value. Firing a change event will update the value, but will not trigger the event listener. So, use fireEvent.input instead of fireEvent.change.
Just because the event has fired doesn't mean the component state has updated. You can wrap fireEvent with act to ensure the component updates before asserting anything.
Updated test:
it("should write in input (variant)", async () => {
const app = render(App);
const input = app.getByLabelText("textbox");
await act(() => fireEvent.input(input, { target: { value: "test" } }));
expect(input.value).toBe("test");
expect(app.container.querySelector("h1").textContent).toBe("test");
});
Hi Guys I'm Newbie at VueJS,
Anyone who can help me about on getting default checked at my checkbox list
I'm using v-model so the checked won't work
Any idea or suggestion?
You bind the input to a truthy value using the v-model directive
<input type="checkbox" v-model="selected">
In your component data (Updated based on #Phil s comment)
data () {
return {
selected: true, // True of false, or other truthy value depending on needs
}
}
Then, depending on the value on selected your input will be checked/unchecked.
Note - in the documents it is stated that
v-model will ignore the initial value, checked, or selected attributes
found on any form elements. It will always treat the Vue instance data
as the source of truth. You should declare the initial value on the
JavaScript side, inside the data option of your component.
Read more at https://v2.vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components
I cannot for the life of me figure this out.
Fiddle at: https://jsfiddle.net/s8xvkt10/
I want
User clicks checkbox
Then based on separate conditions
Checkbox calculatedCheckedValue returns a data property /v-model of true/false
And the checked state reflects the calculatedCheckedValue
I can get:
The calculatedCheckedValue calculates and interpolates properly
But I fail at:
Having the :checked attribute render the calculatedCheckedValue properly in the DOM
e.g. If a false checkbox is clicked and the calculatedCheckedValue still returns false, the checkbox toggles onscreen between checked and unchecked
I’ve tried:
Using a v-model with a custom set that does the calculation and sets the local state which the custom get returns
Imitating a v-model using #change.prevent.stop="updateCalculatedValue" and :checked="calculatedValue"
Assuming the #change happens after the #click (which i think is wrong) and using #click.prevent.stop="updateCalculatedValue" and :checked="calculatedValue"
The model is working and rendering the calculated value as string in a DOM span,
but the checked value doesn't seem to respect the model value
Can someone please help me out?
I've solved the problem at: https://jsfiddle.net/pc7y2kwg/2/
As far as I can tell, the click event is triggered even by keyboard events (src)
And happens before the #change or #input events (src)
So you can click.prevent the event, but you need to either prevent it selectively or retrigger the event after the calculation.
//HTML Template
<input :checked="calculatedValue5" #click="correctAnswer" type="checkbox">
//VUE component
data() {
return {
calculatedValue5: false,
};
},
methods: {
correctAnswer(e){
const newDomValue = e.target.checked;
this.calculatedValue5 = this._calculateNewValue(newDomValue);
if(this.calculatedValue5 !== newDomValue){
e.preventDefault();
}
}
}
I think this is preventing checkbox value from updating before the data value, which seems to break the reactivity. I'm not sure the technical reason why, but the demo does work
I have two components in mu app.vue and i will send data from app.vue to my first component(filter component) at the time of page load.
Now based on the user actions in the displayed data in the second component i need to pass new vales back to the first component.
There i am using a and a . Consider one of the props i receive in the first component is "nselectedOption" and i do this in data: { return { selectedOption: this.nselectedOption }} to avoid mutation warning.
Now everytime i update the values for this component from second component, i am seeing changes in "nselectedOption" only and not in "selectedOption". Can you explain why is that ?
I need the updated value into a v-model of .
1. If i use "nselectedOption" it is updating the textbox but while editing the value throws error.
2. If i use "selectedOption" it is not updating the values in the textbox itself.
I have even tried using the computed values to return the value, it works but if i try to change values in other options in the filter component the already updated values displays null or nothing.
Please help me. Is this problem can be solved using State Management Concept or do i have to have a separate compoenent other than App.Vue to do all this so that it would act as a parent/child kinda thing or is there anyother way to overcome this.
Try using watcher. If you watch for nselectedOption, everytime it changes, the watcher will fire and bind the changed value to selectedOption.
props: ['nselectedOption'],
data: {
selectedOption
},
watch: {
nselectedOption: function (val) {
this.selectedOption = val
}
}
Also, if the prop you are watching is an object/array, consider using spread operator if you want to make a local copy to avoid mutation.
this.someObj = { ...someProp }
I have view component that displays info about RECORD. This component contains contains some properties for description of user interactions with view (let's say it is lastPushedButton). So I need to reset this lastPushedButton property when view is receiving new RECORD's model. I have tried to use updated event but then it resets lastPushedButton everytime something changed, not only RECORD.
What is the right approach?
I assume your record is passed in via a property to your component?
What you probably want is a watch on your property variable: https://v2.vuejs.org/v2/guide/computed.html#Watchers
watch: {
record: function (newValue, oldValue) {
this.lastPushedButton = ''
}
},