在 vuejs 中的两个选择标签上选择不同的值答案

【问题标题】：Select different values on two select tags in vuejs在 vuejs 中的两个选择标签上选择不同的值
【发布时间】：2021-05-25 09:41:18
【问题描述】：

我是 VueJS 的新手，我正在尝试构建一个包含两个国家/地区选项的页面。选项不能同时具有相同的值。

这是我的组件文件：

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

所以，顶部选择选项以“ÚSA”开头，如果我将其更改为“巴西”，底部选择选项需要更改为“美国”

我花了一整天的时间，得出的结论是，我无法追踪选择选项的起源和命运。

如果我开始选择顶部选择选项，这就是原点。所以底部选择选项是命运。如果我开始选择底部选择选项，这就是原点。所以首选选项是命运。

所以我试图在 onChange 函数中使用 if else 来执行此操作。我创建了句柄变量来保留初始原点和命运值，但这太快了。

有没有什么方法可以使用 vuejs 以更简洁的方式做到这一点？

【问题讨论】：

我认为您必须使用计算属性来管理逻辑。

标签： javascript typescript vue.js vuejs2

【解决方案1】：

使用 Vue 2 和 Vue CLI，我创建了一个示例单文件组件“TwoSelectTags.vue”，它应该为您提供一些管理选择标签的想法。

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

【讨论】：