vue는 선택 드롭다운 상자를 전환하고 다중 선택 상자를 지웁니다.

Vue 프레임워크를 사용하여 프런트엔드 비즈니스를 개발하는 과정에서 다단계 연결 드롭다운 상자를 자주 접하게 됩니다. 이때 이를 구현하기 위해 select 요소를 사용하겠습니다. 그러나 다중 수준 연결 시나리오에서는 드롭다운 상자 옵션이 변경될 때 사용자가 관련 옵션을 다시 선택할 수 있도록 다중 선택 상자에서 옵션을 지워야 하는 경우가 있습니다. 이번 글에서는 Vue에서 드롭다운 박스 옵션이 변경될 때 다중 선택 박스의 옵션을 지우는 기능을 구현하는 방법을 소개하겠습니다.

1. 요구사항 분석

실제 프로젝트에서는 국가, 지방, 도시 등의 정보를 선택해야 하는 경우가 종종 있습니다. 이때 일반적으로 선택 요소를 사용합니다. 이것을 달성하기 위해. 하지만 이 시나리오에서는 상위 드롭다운 상자의 옵션을 변경하면 하위 드롭다운 상자의 옵션도 변경되지만 다중 선택 상자의 옵션은 지워지지 않습니다. 옵션이 드롭다운 상자 옵션과 일치하지 않습니다. 따라서 드롭다운 상자 옵션이 변경되면 다중 선택 상자의 옵션을 지워 사용자가 해당 옵션을 다시 선택할 수 있도록 해야 합니다.

2. 솔루션

요구 사항을 실현하는 과정에서 vue의 감시 속성을 사용하여 드롭다운 상자 값의 변경 사항을 모니터링하고 값이 변경되면 다중 선택 상자의 옵션을 지울 수 있습니다. . 구체적인 구현은 다음과 같습니다.

템플릿에서 먼저 다중 선택 상자와 드롭다운 상자를 정의하고 이를 해당 옵션 및 값에 바인딩할 수 있습니다.

<template>
  <div>
    <select v-model="country" @change="clearCity">
      <option value="China">中国</option>
      <option value="US">美国</option>
      <option value="Japan">日本</option>
    </select>
    <select v-model="province" @change="clearCity">
      <option v-for="p in provinces" :value="p">{{p}}</option>
    </select>
    <select multiple v-model="city">
      <option v-for="c in cities" :value="c">{{c}}</option>
    </select>
  </div>
</template>

스크립트에서 get을 정의해야 합니다. 값이 변경될 때 다중 선택 상자를 지우는 논리를 트리거하는 set 메서드:

<script>
export default {
  data() {
    return {
      country: 'China',
      province: '',
      cities: [],
      provinces: {
        'China': ['北京', '上海', '广州', '深圳'],
        'US': ['纽约', '洛杉矶', '旧金山'],
        'Japan': ['东京', '大阪', '福冈']
      }
    }
  },
  computed: {
    // 根据国家选择对应的省份
    availableProvinces() {
      return this.provinces[this.country] || []
    }
  },
  watch: {
    // 监听国家变化，清空省份和城市
    country(newVal, oldVal) {
      this.province = ''
      this.cities = []
    },
    // 监听省份变化，清空城市
    province(newVal, oldVal) {
      this.cities = []
    }
  },
  methods: {
    // 清空城市选项
    clearCity() {
      this.cities = []
    }
  }
}
</script>

여기에서는 계산된 속성을 사용하여 사용 가능한 지방 옵션을 계산한 다음 국가 및 지방에 대한 get 및 set 메서드를 정의합니다. 체크박스를 지우기 위한 set 메소드 로직에서 트리거됩니다. 동시에 watch 속성에서 국가 및 지방 값의 변화도 모니터링하고, 값이 변경되면 지방 및 도시 옵션을 삭제합니다. 마지막으로 도시 옵션을 지우는 메서드에clearCity 메서드를 정의했습니다.

3. 요약

이 글에서는 vue에서 드롭다운 박스 옵션 변경 시 다중 선택 박스의 옵션을 지우는 기능을 구현하는 방법을 소개합니다. vue의 watch 속성을 사용하여 값 변경을 모니터링하고 변경 시 다중 선택 상자를 지우는 논리를 트리거할 수 있습니다. 위의 예를 통해 vue에서 이 기능을 구현하는 방법을 마스터했다고 믿습니다. 실제 프로젝트에서는 보다 유연하고 편리한 비즈니스 로직을 달성하기 위해 특정 요구 사항에 따라 조정하고 최적화할 수 있습니다.

위 내용은 vue는 선택 드롭다운 상자를 전환하고 다중 선택 상자를 지웁니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!