I am having some issues with using a stencil component with a v-model in a Vue app. I am unsure as to what is the expected behavior. I have this very simple app:
<ifx-search-bar v-model="message" is-open="true" show-close-button="true"></ifx-search-bar>
<input type="text" id="input1" @change="handleChange($event)">
<input v-model="message" id="input2" placeholder="edit me" />
export default {
data() {
return {
something: 'test',
message: ""
}
},
methods: {
handleChange(event) {
this.message = event.target.value
}
}
}
In this simple example, you can see that we have a search-bar component, and two standard html input elements.
When you type something inside input1, you invoke a function, which updates this.message variable, which is bound to the second input, input2, and the search-bar component. As expected, the value of the inpu2 changes, but not for the search-bar component, and I want to know why?
If I type something in the search-bar component, the this.message is updated, and the value of the input2 changes accordingly, but the vice versa does not work. It seems that only one-way binding is working, but not two way binding. The bound variable message is updated, but IT does not update the search-bar component like it does for html input elements.
Does anyone know why? Is it expected behavior, or a bug/issue?
PS: This is the non-JSX code:
export class SearchBar {
@Prop() showCloseButton: boolean = true;
@Prop() isOpen: boolean = true;
@State() internalState: boolean;
@Event() ifxChange: EventEmitter;
@Prop({mutable: true}) value: string;
@Watch('isOpen')
handlePropChange() {
this.internalState = this.isOpen;
}
handleCloseButton = () => {
this.internalState = !this.internalState;
}
handleSearchInput(event: CustomEvent) {
this.value = event.detail.detail;
this.ifxChange.emit(event.detail);
}
setInitialState() {
this.internalState = this.isOpen;
}
componentWillLoad() {
this.setInitialState()
}