undefinedfix
Sign in

How to use picker picker to handle drop-down boxes?

thabouti edited in Thu, 24 Nov 2022

The business scenarios are as follows:

You want to select an option through the picker component and assign its value value to the value that it is bound to articleinfo.type For example, I chose the first option study, articleinfo.type It is 1. So the form shows 1, but I want the form to show study.

The background of the problem and what methods have you tried

At the beginning, the way I thought of was to try to create an object to bind the value value, and then input to bind the object. However, it's very boring to think that there may be many selection boxes, and to create objects one by one. Then I thought about it. I wrote a function to return the corresponding label. I thought it would be successful this time. Later, I was beaten in the face. V-model could not bind function. I believe developers should encounter this problem. How to make a drop-down box on the mobile terminal and the options are in the form of key value. Please help me!!!

Related codes

  [
        {
          value: "Study",
          label: 1
        },
        {
          value: "Life",
          label: 2
        },
        {
          value: "Weekly report",
          label: 3
        },
        {
          value: "monthly report",
          label: 4
        }
      ]
      <nut-textinput
        @click.native="showSelectBox(articleTypeOptions)"
        v-model="articleInfo.type"
        label="文章类型:"
        placeholder="请选择文章类型"
        readonly
        :clearBtn="true"
        :disabled="false"
        :hasBorder="false"
      />
      <input type="file" @change="fileUpdate" />
      <nut-picker @close="close" @confirm="confirm" :isVisible="isShowBox" :listData="options"></nut-picker>
      <nut-button block shape="circle" @click="submit">提交</nut-button>

What are your expectations? What is the actual error message?

image.png

image.png

0 Replies