1. Business background

The reason for this problem is: when the Vue page performs data rendering, hierarchical nesting or multiple data binding makes the component information box data unable to be monitored by Vue in real time. Therefore, the data changes but there is no response to updating or deleting the data of the corresponding information box on the page. At this time, it needs to be forced to update and re render.

2. Specific examples

1) Realization effect

Select the text from the drop-down box on the right to directly insert it into the information box on the left, which does not affect the normal input of the information box on the left. When the text is input in the information box on the left and the shortcut phrase is also selected on the right, it is separated by commas and input in the information box on the left

2) page code

<template>
  <el-form size="small" :model="form" ref="form" label-width="120px">
    <el-row :gutter="24">
      <el-col :span="10">
        <el-form-item label="Test text:" prop="Message" :rules="messageRule">
          <el-input type="textarea" clearable placeholder="Please enter test text:" v-model="form.Message" @input="changeMessage($event)"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="14">
        <el-form-item label="Shortcut information selection">
          <el-select v-model="searchConfig" @change="searchSelect(searchConfig)" clearable @clear="clearSelect()" placeholder="Please select">
            <el-option v-for="item in quickPhrases" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <div style="color: red; font-size: 3px">Note: This is the quick information prompt phrase of test text:, you can directly choose to insert the test text: information box on the left</div></el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

method:

export
default {
        data() {
            return {
                form:
                {
                    Message:
                    '',
                },
                quickPhrases: [{
                    value: 'Shortcut phrase 1',
                    label: 'Shortcut phrase 1',
                },
                {
                    value: 'Shortcut phrase 2',
                    label: 'Shortcut phrase 2',
                },
                ],
                searchConfig: '',
                // Shortcut phrase for test text
                // Test text custom validation rules
                get messageRule() {
                    if (!this.form.Message && !this.searchConfig) {
                        return {
                            required: true,
                            message: 'Please enter or select test text',
                            trigger: 'blur'
                        }
                    } else {
                        return {
                            required: false,
                            message: '',
                            trigger: 'blur'
                        }
                    }
                },
            }
        },
        methods: {
            // Forces the value of the test text information box to be updated
            changeMessage() {
              this.$forceUpdate()
            },
            // Select a shortcut phrase
            searchSelect(val) {
                this.searchConfig = val
                if (this.form.Message === undefined || this.form.Message === '') {
                    this.form.Message = this.searchConfig
                } else {
                    this.form.Message = this.form.Message + '，' + this.searchConfig
                }
            },
            // Clear shortcut phrase
            clearSelect() {
                this.searchConfig = ''
            },
        },
    }

3. Vue official website documents and API s

1) About handling boundary cases - force updates

Forced update

If you find that you need to do a forced update in Vue, 99.9% of the time, you did something wrong somewhere.

You may not have noticed the change detection considerations for arrays or objects, or you may rely on a state that is not tracked by Vue's responsive system.

However, if you have done the above and still find that you need to force the update manually in very few cases, you can do it through $forceUpdate().

2)$forceUpdate()

vm.$forceUpdate()

• Example:

  Force the Vue instance to re render. Note that it only affects the instance itself and the subcomponents inserted into the slot content, not all subcomponents.

3. Appendix

In addition to forced updates, you can also add properties to objects, using Vue$ set()

Here is a link to a friend: Vue - add attributes to the object (use Vue.$set())

Vue official documents

1) Handling boundary conditions - force updates

2)#vm-forceUpdate

3)#Vue-set

The above is Vue forced update VM$ Introduce forceupdate() and make this record. If it is helpful, welcome to like and pay attention to the collection!