Select vuejs中两个select标签上的不同值

Question

I'm a newbie to VueJS and I'm trying to build a page with two select options of countries. The options cannot have the same value at the same time.

This is my component file:

<template>
  <div>
    <form @change="onChange">
      <select name="originCountries" id="originCountries" v-model="initialOriginCountry">
        <option value="BRAZIL">BRAZIL</option>
        <option value="USA">USA</option>
        <option value="ARGENTINA">BRAZIL</option>
      </select>

      <div>
        not important info...
      </div>

      <select name="destinyCountries" id="destinyCountries" v-model="initialDestinyCountry">
        <option value="BRAZIL">BRAZIL</option>
        <option value="USA">USA</option>
        <option value="ARGENTINA">BRAZIL</option>
      </select>
    </form>
  </div>
</template>

<script lang='ts'>
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class FormSubmitter extends Vue {
 private initialDestinyCountry = 'USA'
 private initialOriginCountry = 'BRAZIL'
}

So, the top select option starts with 'ÚSA', if I change this to 'BRAZIL', the bottom select option needs to change to 'USA'

I've spent all day in this and conclud the problem is the fact I cannot track what select option is the origin and what is the destiny.

If I start selecting the top select option, this is the origin. So the bottom select option is destiny. If I start selecting the bottom select option, this is the origin. So the top select option is destiny.

So I was trying to do this inside onChange function with if else. I created handle variables to keep the initial origin and destiny values, but this got confusing too fast.

Is there any way to do this in a cleaner way using vuejs?

Answer 1

Using Vue 2 with the Vue CLI, I created a sample Single File Component 'TwoSelectTags.vue' that should give you some ideas for managing your select tags.

<template>
  <div class="two-select-tags">
    <div class="col-md-4">
      <form @submit.prevent="submitForm">
        <div class="form-group">
          <label for="originCountries">Origin Country</label>
          <select id="originCountries" class="form-control"
            v-model="originCountry" @change="changeOrigin">
            <option v-for="(countryOption, index) in countryOptions" :key="index">{{ countryOption }}</option>
          </select>
          <span>Selected origin: {{ originCountry }}</span>
        </div>
  
        <div class="form-group">
          <label for="destinationCountries">Destiny Country</label>
          <select id="destinationCountries" class="form-control"
            v-model="destinationCountry" @change="changeDestination">
            <option v-for="(countryOption, index) in countryOptions" :key="index">{{ countryOption }}</option>
          </select>
          <span>Selected destination: {{ destinationCountry }}</span>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
      </form>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        countryOptions: [
          'BRAZIL',
          'USA',
          'ARGENTINA'
        ],
        originCountry: 'USA',
        destinationCountry: 'BRAZIL'
      }
    },
    methods: {
      changeOrigin() {
        // Add logic to handle destination options
        if (this.originCountry === 'BRAZIL') {
          this.destinationCountry = 'USA';
        }
      },
      changeDestination() {
        // Add logic to handle origin options
      },
      submitForm() {
        console.log('submitForm');
      }
    }

  }
</script>