vue 사용 vant 드롭다운 상자 van-dropdown-item 귀속 타이틀 값 불변 문제 해결

1. vue 프로젝트 만들기
2. vant 구성 요소 사용
npm install vant --S
전역 인용 시 main.js 도입

import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);

만약 당신이 도입한 후에 페이지의 스타일과 구성 요소가 모두 마운트된 것을 발견하면,console 컨트롤러가 오류를 보고합니다. xxx 구성 요소에register가 없다고 합니다. 이때 당신의 vant 플러그인 버전에 문제가 있을 가능성이 높습니다. 최신 vant를 다시 다운로드하면 됩니다. 지금은 2.6.0 버전입니다.
자, 이제 계속합시다.
드롭다운 상자를 사용해야 하는 곳에서 드롭다운 상자 구성 요소 사용하기

<van-dropdown-menu>
  <van-dropdown-item
   v-model="value"
  :options="developList"
  />
</van-dropdown-menu>
 
data () {
  return {
  value: ''
  developList: [
   {
   value: '1',
   text: ' '
   },
  {
   value: '2',
   text: ' '
   },
  ]
 }
}

만약 그렇다면 밑에 있는 상자는 기본적으로 첫 번째 글자인'wishing 첫 번째'를 표시하고, 밑에 있는 상자를 누르면 두 번째를 선택할 때도'나는 두 번째'로 바뀔 것이다
기본 선택을 원하지 않고 처음부터 이 알림을 표시하려면 vant의api 문서를 보십시오. 이 제목은 밑에 있는 상자의 표시 문자입니다. 처음에 많은 사람들이 이 밑에 있는 상자의 제목이 표시만 하고 밑에 있는 상자를 누르면 자동으로 귀속된다고 생각했지만 잘못된 것입니다. 다음은 좋은 예입니다.

<van-dropdown-menu>
 <van-dropdown-item
 title=" "
 v-model="value"
 :disabled="disabled"
 :options="developList"
 />
</van-dropdown-menu>
 
data () {
  return {
  value: ''
  developList: [
   {
   value: '1',
   text: ' '
   },
  {
   value: '2',
   text: ' '
   },
  ]
 }
}

선택한 자연은 변한 적이 없다는 것을 알게 될 것입니다. 첫 번째든 두 번째든 제목이 귀속된 것인지 아닌지 생각하게 될 것입니다. 다음은 다음과 같은 조작이 있습니다.

<van-dropdown-menu>
 <van-dropdown-item
 :title="title"
 v-model="value"
 :disabled="disabled"
 :options="developList"
 />
</van-dropdown-menu>
 
data () {
  return {
  value: ''
  title:'' ,
  developList: [
   {
   value: '1',
   text: ' '
   },
  {
   value: '2',
   text: ' '
   },
  ]
 }
}

추가해 보니 아직 바뀌지 않았습니다. 그것은 귀속된 값이 바뀌지 않은 것 같습니다. 마치 그렇습니다. 당신의 값이 이 타이틀을 정의했기 때문입니다. 이 타이틀은 아래 상자에서 선택한 디스플레이입니다. 다만 당신이 타이틀이 없을 때 vant가 선택한 텍스트 문자를 타이틀에 비추었습니다. 만약에 당신이 타이틀을 사용하여 귀속한다면 수정할 때마다 타이틀을 수정해야 합니다. vantapi를 보면 변경 이벤트가 있음을 발견할 수 있습니다.이제 조작할 수 있어요.

<van-dropdown-menu>
 <van-dropdown-item
 :title="title"
 v-model="value"
 :options="developList"
 @change="changeDevelop"
 />
</van-dropdown-menu>
 
data () {
  return {
  value: ''
  title:'' ,
  developList: [
   {
   value: '1',
   text: ' '
   },
  {
   value: '2',
   text: ' '
   },
  ]
 }
},
 
methods: {
 changeDevelop (i) {
  this.title = this.developList[i-1].text
 },
}

이건 문제없어!
이상 이 해결 vue 사용 vant 하단 프레임 van-dropdown-item 귀속 타이틀 값 불변 문제 는 바로 편집자 가 공유 한 모든 내용 을 참고 하 고 많은 응원 을 바랍니다.