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

Posted 2023-02-22

【中文标题】在 vuejs 中的两个选择标签上选择不同的值

【英文标题】：Select different values on two select tags in 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 以更简洁的方式做到这一点？

【问题讨论】：

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

【参考方案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>