Enter 키를 누르지 않고 칩을 사용하여 태그를 vuetify합니다.
나의 뷰티파이 프로젝트에서 나는 이런 것을 가지고 있다.
<v-select
v-model="data.emails"
label="Add multiple recipent by hitting enter"
multiple
tags
chips
solo
></v-select>
이 정도면 충분합니다.하지만 Enter 키를 눌러야만 작동합니다.이 목표를 달성하려면,
왜냐하면 이메일 등 많은 아이템을 붙일 예정이기 때문입니다.그래서 나는 히트 엔터를 타보고 싶어.
혼수상태로 분리된 이메일을 많이 붙여 배열로 선택한 칩을 얻을 수 있는 방법이 있나요?
감사합니다.
유사한 동작에 대한 지원은 v1.1에 대해 계획되어 있습니다.
https://github.com/vuetifyjs/vuetify/issues/3287
댓글 중 하나에서 임시 해결책을 복사하겠습니다.
@jakarn은 다음과 같이 썼다.
예를 들어 다음과 같습니다.
더하다ref="tags"
고객님께v-select
요소
더하다@keyup.space="updateOnSpace('tags')"
컴포넌트에 접속합니다.
를 추가하다method
:updateOnSpace(tags) { this.$refs[tags].onEnterDown(); },
텍스트 값 붙여넣기(search-input
값을 캡처합니다.)를 구분자로 사용하여 선택한 데이터로 설정하면 다음 내용을 청취할 수 있습니다.paste
이벤트 후 (임의 딜리미터로) split 값을 selected-values 배열에 추가합니다.
https://codepen.io/anon/pen/bKEQZY
언급URL : https://stackoverflow.com/questions/50679550/vuetify-tags-with-chips-using-instead-of-hitting-enter
'sourcecode' 카테고리의 다른 글
모듈과 함께 vuexfire를 사용할 때 돌연변이를 처리하는 방법은 무엇입니까? (0) | 2022.08.13 |
---|---|
폴더에서 모든 Vue 구성 요소를 가져오려면 어떻게 해야 합니까? (0) | 2022.08.13 |
도커 이미지 - 유형.슬림형 vs 슬림형 vs 스트레칭 vs 알파인 (0) | 2022.08.13 |
어레이 응답을 vue.js 및 larabel로 표시하는 방법 (0) | 2022.08.13 |
VueJ: 트리거 시 커스텀 Socket.io에서 내보내는 기능이 처리되지 않음 (0) | 2022.08.13 |