前提・実現したいこと
Vuetifyの<v-dialog>の中に<v-varousel>を表示させたいです。
<v-dialog>はv-modelで紐づいた真偽値で表示・非表示を制御しています。
ボタンをクリックしたら<v-dialog v-model='flag'>のflagが変わって表示を制御しています。
この際に、<v-dialog>の中の<v-carousel>が表示されなく、以下のエラーになります。
おそらく Vue.jsのライフスタイルや内部の問題だと思っています。
Vue.jsにお詳しいかた、ご教授いただきたいです。
発生している問題・エラーメッセージ
エラーメッセージ Cannot read property 'clientHeight' of undefined at VueComponent.onBeforeTransition Cannot read property 'focus' of undefined at VueComponent.eval ![イメージ説明](ba04493d52974dd6f2ab60818561b7af.png)
該当のソースコード
<v-dialog v-model="flag" width="500" > <v-card> <v-carousel> <v-carousel-item v-for="(item,i) in items" :key="i" :src="item.src" ></v-carousel-item> </v-carousel> </v-card> </v-dialog> <v-btn @click="flag = !flag">表示の切り替え</v-btn>
試したこと
・切り替え作業(ボタンを使用してflagの真偽値を変える)をなくしてみました。
→正常にエラーなく初期表示される。
補足情報(FW/ツールのバージョンなど)
・Nuxt, Typescript, composition-API, macOS
詳しくは以下のpacage.jsonをご覧ください。
・pacage.json
{
"name": "hoge",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt-ts",
"build": "nuxt-ts build",
"start": "nuxt-ts start",
"generate": "nuxt-ts generate",
"lint:js": "eslint --ext ".js,.vue" --ignore-path .gitignore .",
"lint": "yarn lint:js .ts",
"test": "jest"
},
"dependencies": {
"@nuxt/typescript-runtime": "^2.1.0",
"@nuxtjs/axios": "^5.12.5",
"@types/googlemaps": "^3.43.3",
"@types/load-google-maps-api": "^2.0.1",
"core-js": "^3.8.3",
"load-google-maps-api": "^2.0.2",
"nuxt": "^2.14.12",
"nuxt-composition-api": "^0.11.0",
"ts-node": "^9.1.1",
"vue-google-maps-typescript": "^0.1.4",
"vue2-google-maps": "^0.10.7"
},
"devDependencies": {
"@nuxt/types": "^2.14.12",
"@nuxt/typescript-build": "^2.1.0",
"@nuxtjs/eslint-config-typescript": "^5.0.0",
"@nuxtjs/eslint-module": "^3.0.2",
"@nuxtjs/vuetify": "^1.11.3",
"@types/googlemaps": "^3.43.3",
"@vue/test-utils": "^1.1.2",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.6.3",
"eslint": "^7.18.0",
"eslint-config-prettier": "^7.2.0",
"eslint-plugin-nuxt": "^2.0.0",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^7.5.0",
"fibers": "^5.0.0",
"jest": "^26.6.3",
"node-sass": "^6.0.0",
"prettier": "^2.2.1",
"pug": "^3.0.0",
"pug-plain-loader": "^1.1.0",
"sass": "^1.33.0",
"sass-loader": "^7.1.0",
"ts-jest": "^26.4.4",
"vue-jest": "^3.0.4",
"vuex-composition-helpers": "^1.0.22",
"vuex-persistedstate": "^4.0.0-beta.3"
}
}
あなたの回答
tips
プレビュー