Question

在Vue组件中，我有一个带有两个选择输入的表单。我还具有一个按钮，希望在单击该按钮时，两个选定的值彼此切换。

我的表单：

<v-form
  class="form"
  @submit.prevent="submitRequest"
  >
    <v-col class="d-flex" xs="12" sm="12" md="12" lg="12">
        <v-select
            v-model="form.fromCity"
            name="fromCity"
            required
            :items="form.selectItems"
            item-text="mediumName"
            item-value="uicCode"
            label="From city"
            solo
            autofocus
        ></v-select>

        <v-btn text small color="primary" @click="switchValues()">
            <v-icon>fa-exchange-alt</v-icon>
        </v-btn>

        <v-select
            v-model="form.toCity"
            name="toCity"
            required
            :items="form.selectItems"
            item-text="mediumName"
            item-value="uicCode"
            label="To city"
            solo
            return-object
        ></v-select>
    </v-col>

    <v-col class="d-flex" xs="12" sm="12" md="6" lg="3">
        <v-btn 
        color="primary"
        type="submit"
        >Choose</v-btn>
    </v-col>
  </v-form>

我在其中设置属性的地方

   data: () =>  ({
        form: {
            selectItems: [
                {'uicCode': '8400206', 'mediumName' : 'Eindhoven'},
                {'uicCode': '8400597', 'mediumName' : 'Tilburg'},
            ],
            fromCity: '',
            toCity: ''
        },
    })

我尝试了这个，但是显然这是行不通的：

   switchValues() {
        this.form.fromCity = this.form.toCity
        this.form.toCity = this.form.toCity
    }

我的问题是，如何在不像我刚才那样弄乱所选输入的情况下进行切换？是否有简单的方法来获取每个输入的值并进行切换？

Answer 1

您只需要在城市之间交换值：

只需重写switchValues方法

switchValues() {
      const temp = this.form.fromCity;
      this.form.fromCity = this.form.toCity
      this.form.toCity = temp;
    }

将返回对象属性添加到fromCity选择框中

此处工作的Codepen：Heroku integration

单击按钮切换输入值

1 个答案: