CODEWITHSUNDEEP
vue.jsvuejs2
Jason Lam
Jason Lam

Reputation: 1392

Vue.js - update dom after object property updates

This drives me crazy. Dom with v-model won't update with object properties, but Vue devtools does update correctly.

I learned from somewhere that this may require Vue.$set, which seems impossible in v-for iterations.

<el-tab-pane v-for="(item, index) in onShelveForm.data" :key="item.id" :label="item.name">
  <div class="form-block" v-for="formItem in formStructure">
    <el-form-item
    :prop="'data.' + index + '.' + formItem.id"
    :label="formItem.name">

      <el-select
        v-model="item[formItem.id]"
        readonly="false">
        <el-option v-for="option in formItem.value.regex"
          :label="option"
          :value="option"></el-option>
      </el-select>

    ...

When I click an option, the selector doesn't show the new value, but Vue devtool reacts correctly.

If Vue.$set could save this, how would I use it in v-for?

Upvotes: 0

Views: 1791

Answers (1)

Daniel
Daniel

Reputation: 35684

If you can provide a jsfiddle, it may be easier to see why the v-model is not working.

There are a few possibilities, such as the object not being present when the instance created.

The simplest way may be to just force an update when the change happens by adding @change='Vue.$forceUpdate()' , but this more of a hack than a solution. The v-model should work

<el-select
    @change='Vue.$forceUpdate()'
    v-model="item[formItem.id]"
    readonly="false">
    <el-option v-for="option in formItem.value.regex"
      :label="option"
      :value="option"></el-option>
</el-select>

Upvotes: 1

Related Questions