What should I do if Vue adds data but does not update it?

Solution to the problem that vue adds data but does not update: 1. Use "this.$set(target, key, value);" or "Vue.set(target, key, value)" to add attributes; 2. Use multiple slots dynamically in the render function and pass values ​​to the slots.

#The operating environment of this tutorial: Windows 10 system, Vue version 3, Dell G3 computer.

What should I do if vue adds data but does not update?

Solve the problem of vue data not being updated in real time (the data is changed, but the data is not updated in real time)

1. In the process of our development using vue , you may encounter a situation:

When the vue instance is generated, when the data is assigned again, sometimes it will not be automatically updated to the view;

To the responsive object Add a property to it and make sure that this new property is also responsive and triggers view updates. It must be used to add new properties to responsive objects, because Vue cannot detect ordinary new properties, and you need to use vue's built-in methods

2. Vue.set() responsively adds and modifies data

At this point we need to know what parameters Vue.set() requires. Official API: https://cn.vuejs.org/v2/api/#Vue-set

Calling method: Vue .set( target, key, value ) or this.$set(target, key, value);

target: the data source to be changed (can be an object or array)

key: Specific data to be changed

value: reassigned value,

Call: this.$set(target, key, value);

Supplementary knowledge: vue Render scopedSlots

The general default usage of slots in render is as follows: this.$slots.default has no name for the use of using template. If you want to use multiple slots. The slot needs to be named uniquely.

Dynamicly use multiple slots in the render function and pass values ​​to the slots

1. My business logic:

Used three components,

Component A calls component B, component B calls component C, and component C is its own encapsulated render component.

Component A hopes to insert its own custom slot into component C. Component C renders customized content and passes the value of component C to component B and component A. Component B performs operations on component C. A larger layer of encapsulation

A component calls B component

<index-grid>
     <div
      slot="name"
      slot-scope="field"
      class="check-link"
      @click="rowLinkClick"
     >
      <span>{{ field.field.rowData.name }}</span>
     </div>
</index-grid>

A component refers to B component, slot-scope receives the value of solt passed from B component, slot="name", It is to name the slot;

The render function of component C is called in component B

<sub-grid ref="indexGridSub">
   <span
    v-for="(item, index) in fields"
    :key="index"
    slot="name"
    slot-scope="field"
   >
    <slot name="name" :field="field"></slot>
   </span>
 
  </sub-grid>

The slot in the span of component B is a dynamic value and must be the same value as the slot in component A to be accepted From the custom slot of the A component,

field is the value passed from the C component

C component is the render function

h(
     "td",
     {
      style: { width: field.width + "px" },
      class: { borderRight },
      // 作用域插槽格式
      // { name: props => VNode | Array<VNode> }
      scopedSlots: this.$scopedSlots.name,
      // 如果组件是其他组件的子组件，需为插槽指定名称
      slot: &#39;name&#39;
     },
     this.$scopedSlots.name({
      field: field,
      rowData: rowData,
     })
    );

The value passed up by the C component It is the object of {field: '', rowData: ''}

Recommended learning: "vue.js video tutorial"

The above is the detailed content of What should I do if Vue adds data but does not update it?. For more information, please follow other related articles on the PHP Chinese website!