v-model not updating in component

Question

Trying the wrap the datetime picker from uiv.js here, but wrapped element's v-model won't update, except date property of UIV's date-picker component.

<script type="text/x-template" id="datepicker2">
<form class="form-inline uiv" >
<input v-model="date_stage" class="form-control tbox1" type="text" />
<dropdown class="form-group" v-model="$data._show" ref="dropdown" :not-close-elements="$data._els">
  <div class="input-group">
    <input v-model="date" class="form-control tbox2" type="text"/>
    <input v-model="date_stage" class="form-control tbox3" type="text"/>
    <div class="input-group-btn">
      <btn class="dropdown-toggle"><i class="glyphicon glyphicon-calendar"></i></btn>
    </div>
  </div>
  <template slot="dropdown">
      <li><date-picker v-model="date" :today-btn="false" :clear-btn="false"/></li>
      <li></li>
      <btn-group>
        <btn v-model="stage" input-type="radio" input-value="1">S1</btn>
        <btn v-model="stage" input-type="radio" input-value="2" disabled>S2</btn>
        <btn v-model="stage" input-type="radio" input-value="0">S3</btn>
      </btn-group>
      <btn block type="primary" @click="$data._show = false">OK</btn>
  </template>
</dropdown>
</form>
</script>

<script type="text/javascript" src="/static/vuejs/vue-2.7.13.js"></script>
<script type="text/javascript" src="/static/uiv/1.4.3/uiv.min.js"></script>
<script type="text/javascript">
Vue.component("datepicker2", {
template: "#datepicker2",
data() {
    return {
        _show: false, // unrelevant, those _xxx are from dropdown component doc
        _els: [],  // 
        stage: null,
        date: null,
        date_stage: null
    };},
mounted() {
    this.$data._els.push(this.$refs.dropdown.$el)
},
watch: {
    date: (dt_new, dt)=>{ console.log(dt_new);}, // always works, logs with UI change.
    stage: (stg_new, stg)=>{console.log(stg_new, stg);} // never react to UI change, works only when manually change data on component instance.
}
});

Among all the textboxes, only .tbox2 binded with date can two-way update. I can update .tbox1 and .tbox3 by manipulating root_vue.$children[0].date_stage='show stage', but typing text in those textboxes won't change the mounted component's data attribute stage, date_stage, except date. If I add watchers to the component, only date has response to UI, stage, date_stage is never triggered from UI. I don't understand Why? Is there anyway to make this work without modifying uiv source?

Ben · Accepted Answer · 2023-08-08T08:41:19.203

Problem disappears after below is removed. There is a conflict between bootstrap.js and uiv.js. Same problem here Vue v-model not reactive with BS4 radio button group .

<script src="/static/appbuilder/js/bootstrap.min.js" nonce=""></script>

Without modifying uiv.js, data-toggle attribute has to be removed from mounted event.

mounted() {
    this.$data._els.push(this.$refs.dropdown.$el);
    _.forEach(this.$el.getElementsByClassName("btn-group"), 
              el=>{el.removeAttribute("data-toggle");});
},

Unrelated, but functions in component constructors should not use => notation for functions, this will be pointed to browser window instead of Vue component.

v-model not updating in component

1 Answers1