Why is the v-model working only way for a stencil component? It updates a value, but the value does not update its component

121 views Asked by At

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()
  }
0

There are 0 answers