[Vuejs]-VueJs v-Model Binding with Hidden Component not working

by

0👍

Use vue to show/hide the component using v-if or v-show. It can’t do it’s job if another library is messing with the DOM.

  <section v-if='showMyComponent'>

or 

<div class="col-sm-4" v-if='showMyComponent'>
            <input type="text" class="form-control field-ml-15" v-model="marshaCode" placeholder="Enter Marsha Code" readonly />
            <input type="text" class="form-control field-ml-15":value="marshaCode" placeholder="Enter Marsha Code" readonly />
            <p>{{marshaCode}}</p>
          </div>

And set showMyComponent to a computed or data property. Then remove the logic to show/hide from your other library.

0👍

You can simply add this.marshaCode="On Show Code" when mounted.

mounted() {
  this.marshaCode="On Show Code"
  console.log(EventBus)
  EventBus.$on('showSurvey', () => {
    this.marshaCode="On Show Code"
  });
}

An example: https://codesandbox.io/embed/vue-template-8l2lg.

Leave a comment