質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.37%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

0回答

703閲覧

Vuetifyで<v-dialog>の中に<v-carousel>を表示できないです....。

Harumaki_i

総合スコア8

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

0クリップ

投稿2021/06/18 22:13

前提・実現したいこと

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"
}
}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.37%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問