preface

  • Online music poke me ah!
  • Music blog source code online!
  • I believe that most students use it in the developmentelementtUiUsed today as a first choice for building projectsel-selectAfter the selector gets the data, the dropdown option is checked but there is no value in the box.
  • How did I analyze and solve this problem in the project

demand

In the “music blog” IT knowledge module in the modify box, want to change the field type single selection to multiple selection.

Problem description

The el-select selector is checked but has no value in the box

Problem analysis

Because the modify button pops up, it assigns the value to the array so that the contents of the pop-up box can be displayed.

The code is as follows:

<el-select
    v-model="item.value"
    :multiple="item.multiple"
    :collapse-tags="item.multiple"
    @change="selectChangeForm($event, item)"
  >
    <el-option
      v-for="item in item.options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
Copy the code

  • Could it be that Vue cannot detect the addition or deletion of object attributes, resulting in no value in the el-select selector box? So I use $set and find it invalid (×)

  • Could it be that it’s already initialized, and then the value comes in; So I changed to watch to monitor, but found that it was invalid (×)

  • My database type field is a string of selected option values separated by commas (,). The el-SELECT drop-down box stores an array. We split this string with “, “as the split point and then reconstitute the array

The solution

Form.info.type.value=type.split(“,”); (fx)

Refer to the article

The element- UI select drop – down box, after the selection of a successful assignment, but the box does not show the pit

< vue+elementUI project Study Notes >

In the past to recommend

Vue-cli3 builds the component library

Vue implements dynamic routing (and the interviewer blows project highlights)

Axios manipulation in a project you didn’t know about (Core principles of handwriting, compatibility)

VuePress builds project component documentation

Vue koa2 + + nginx deployment

Vue-typescript-admin-template background management system

The original link

Juejin. Cn/post / 694211…