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

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

新規登録して質問してみよう
ただいま回答率
85.50%
kintone

kintone(キントーン)とは、サイボウズ社が提供する業務改善プラットフォームです。

Q&A

0回答

1628閲覧

kinotneの詳細画面でVuetify.jsを使ってモーダルを作り、テーブルに値を入れたい

jiyo-ta

総合スコア13

kintone

kintone(キントーン)とは、サイボウズ社が提供する業務改善プラットフォームです。

0グッド

0クリップ

投稿2022/01/14 05:21

タイトルの通りですが、kintoneの詳細画面でVue.js+Vuetify.jsを使ってモーダルを作り、その中にテーブルを表示させたいと考えております。
ボタンクリックでモーダルを表示、まではできているのですが、テーブルにデータが入りません。色々調べてみましたが解決方法がわからず行き詰まってしまったので、ご教授お願いできましたら幸いです。
Vue.jsとVuetify.jsは初めて使います。

【状況】
ヘッダーは表示されますが、リンゴ、バナナ、オレンジは表示されません。
イメージ説明

【最終的にやりたいこと】
テーブルにモーダルで以下の順に機能を持たせたいです。
ひとまず簡素なサンプルコードで2をやってみたいと思ったのですがつまずいております。
1.検索条件入力
2.対象のアプリ(App1とします)を1の条件でAPI取得してテーブルに表示
3. 2の結果から複数件チェックしてまた別にアプリ(App2とします)へ追加する
これができたらwebpackを使って同じ内容を作りたいのですが程遠い状況です。

【試したこと】
ローカル環境で表示させたところ、それはうまく行きました。
が、kintoneでモーダル表示させるとなぜうまくいかないか、分かりません。
この時のソースも以下に示します。

【kintoneソース】
使っているCDN
https://js.cybozu.com/jquery/3.6.0/jquery.min.js
https://js.kintone.com/vuejs/v2.6.9/vue.min.js
https://cdn.jsdelivr.net/npm/vuetify@1.5.12/dist/vuetify.min.js
https://js.cybozu.com/kintone-rest-api-client/2.0.31/KintoneRestAPIClie

(function($) { 'use strict'; let vm; kintone.events.on('app.record.detail.show', async (e) => { var client = new KintoneRestAPIClient(); const res = await client.record.getAllRecords({app: "26"}); console.log(res); var $lookup = $(kintone.app.record.getSpaceElement('space')); var html= ` <v-app id="app"> <v-btn @click.stop="dialog = true">ダイアログを開く</v-btn> <v-dialog v-model="dialog" max-width="900" persistent> <v-card> <v-data-table :headers="headers" :items="tableItems" > </v-data-table> <v-card-actions> <v-spacer></v-spacer> <v-btn @click="search">検索</v-btn> <v-btn @click="dialog = false">閉じる</v-btn> <v-spacer></v-spacer> </v-card-actions> </v-card> </v-dialog> </v-app > `; $lookup.append(html); vm = new Vue({ el: "#app", //vuetify: new Vuetify(), data: () => ({ headers: [ { text: "名前", value: "name" }, { text: "価格", value: "price" }, { text: "操作", value: "action" }, ], tableItems: [ { name: "リンゴ", price: 110 }, { name: "バナナ", price: 230 }, { name: "オレンジ", price: 350 }, ], dialog: false, }), methods: { search: function(){ alert('!!!'); } }, }); return e; }) })(jQuery.noConflict(true));

【ローカル環境で動作できたソース】

<!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-container> <v-row> <v-col cols="4"> <v-data-table :headers="headers" :items="items" hide-default-footer > <!-- "操作"列にボタンを配置します。 --> <template #item.action="{ item }"> <v-btn @click="onClickShow(item)">表示</v-btn> </template> </v-data-table> </v-col> </v-row> </v-container> </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> new Vue({ el: "#app", vuetify: new Vuetify(), data: () => ({ headers: [ { text: "名前", value: "name" }, { text: "価格", value: "price" }, { text: "操作", value: "action" }, ], items: [ { name: "リンゴ", price: 110 }, { name: "バナナ", price: 230 }, { name: "オレンジ", price: 350 }, ], }), methods: { // 表示ボタンが押下された時に呼び出される。 onClickShow(item) { console.log(`${item.name}:${item.price}`); }, }, }); </script> </body> </html>

参考サイト:
kintoneとVue.jsは相性がいい?Vue.jsで独自のビューと検索フォームを作ってみよう
vuetifyのテーブルが簡単高機能でオシャレ 使い方

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問