반응형
Vue.js 2.5+에서 Vuetify와 함께 Vue-IMASK를 사용하는 방법
Vuetify 컨트롤(특히 v-text-field)에서 Vue-IMASK 디렉티브를 사용하려면 어떻게 해야 합니까?HTML 입력에서는 동작하지만 v-text-field에서는 에러가 발생하였습니다.
그vue-imask디렉티브는 Vuetify 요소와 호환되지 않는 것으로 보입니다.왜냐하면 요소가 Vuetify 요소가<input>,그렇지만<v-text-field>로 분해되다<div>(커스텀 입력을 구성하는 여러 내부 요소 포함).문서에는 계산된 속성을 통해 IMask를 사용할 수 있는 예가 나와 있지만, 잠재적으로 다음 항목에 바인딩될 수 있습니다.v-model(포함)<v-text-field>), 어떤 요소도 사용할 수 있는 예를 얻을 수 없었습니다.
를 사용하는 것을 검토해 주십시오.<v-text-field>Vuetify 문서에서 권장하는 것과 같은 다른 마스킹라이브러리를 사용합니다.
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-content>
<v-text-field v-mask="['(###)###-####', '#-###-###-####', '###-###-####']" placeholder="Enter phone number" />
</v-content>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script src="https://unpkg.com/vue-the-mask@0.11.1/dist/vue-the-mask.js"></script>
<script>
Vue.use(VueTheMask)
new Vue({
el: '#app',
vuetify: new Vuetify()
})
</script>
</body>
</html>언급URL : https://stackoverflow.com/questions/53684986/how-to-use-vue-imask-with-vuetify-in-vue-js-2-5
반응형
'programing' 카테고리의 다른 글
| 최종 정적 최종과 정적 최종의 차이 (0) | 2022.08.30 |
|---|---|
| 매핑된 getter가 정의되지 않았습니다. (0) | 2022.08.28 |
| ISO/IEC 웹사이트 및 C 및 C++ 규격에 대한 과금 (0) | 2022.08.28 |
| OS X에서의 LLVM과 Clang (0) | 2022.08.28 |
| Axios-한 번에 여러 요청을 작성합니다(vue.js). (0) | 2022.08.28 |