Switch input values on button click

Question

In my Vue component I have a form with two select inputs. I also have a button where I want to make it possible that when you click on it, both selected values switch with each other.

My form:

<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>

Where I set the properties:

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

I tried this, but obviously this doesn't work:

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

My question is, how can I switch the selected inputs without messing it up like I just did? Is there an easy way to just grab the value of each input and switch it over?

chans · Accepted Answer · 2019-10-29 08:43:33Z

1

You just need to swap the values from city and to city:

Just rewrite the switchValues method

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

Add return-object property to fromCity select box

Working codepen here: https://codepen.io/chansv/pen/KKKvrom?editors=1010

edited Oct 29, 2019 at 8:43

answered Oct 29, 2019 at 8:17

chans

5,26020 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

chans Over a year ago

do upvote and accept this answer, if this resolves your issue..Thanks

Baspa Over a year ago

The switching works, thanks. But now the values aren't correct anymore because the item-value uicCode from selectItems isn't switched. Any idea on how I can fix this? Should I swap between selectItems instead of fromCity / toCity properties?

chans Over a year ago

I've updated codepen, add return-object to fromCity as well

Collectives™ on Stack Overflow

Switch input values on button click

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related