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

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

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

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

SPA(Single-page Application)

SPA(Single-page Application)は、単一のWebページのみでコンテンツの切り替えができるWebアプリケーションもしくはWebサイトです。ブラウザでのページ遷移がないため、デスクトップアプリケーションのようなUXを提供します。

Vuetify.js

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

Vue CLI

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

Q&A

解決済

1回答

4590閲覧

vue-cli3でのmountedメソッドの呼び出し方がわかりません

退会済みユーザー

退会済みユーザー

総合スコア0

Vue.js

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

SPA(Single-page Application)

SPA(Single-page Application)は、単一のWebページのみでコンテンツの切り替えができるWebアプリケーションもしくはWebサイトです。ブラウザでのページ遷移がないため、デスクトップアプリケーションのようなUXを提供します。

Vuetify.js

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

Vue CLI

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

0グッド

0クリップ

投稿2019/06/26 12:37

実現したいこと

vue-cli3.5.0環境でのmountedメソッドの呼び出し方法
Vuetifyのサンプルを参考に作成しました。

発生している問題・エラーメッセージ

Items.vueにmountedメソッドを定義したが、http://localhost:8082/itemにアクセスしたときgetItems ()の結果が表示されません。

該当のソースコード

Items.vue

vue.js

1<template> 2 <v-data-table 3 :headers="headers" 4 :items="itemList" 5 6 class="elevation-1" 7 > 8 <template slot="items" slot-scope="props"> 9 <td>{{ props.item.id }}</td> 10 <td>{{ props.item.name }}</td> 11 <td >{{ props.item.price }}</td> 12 </template> 13 </v-data-table> 14</template> 15<script> 16 import axios from 'axios' 17 export default { 18 data () { 19 return { 20 itemList: [] , 21 22 headers: [ 23 { text: 'ID', align: 'left', sortable: true, value: 'id'}, 24 { text: '商品名', sortable: true,value: 'name' }, 25 { text: '価格',sortable: false, value: 'price' }, 26 ], 27 } 28 }, 29 methods: { 30 // ユーザ一覧 31 getItems () { 32 this.itemList = []; 33 axios.get("http://localhost:8888/item") 34 .then( response => { 35 this.itemList = response.data; 36 console.log("Index : record num=" + this.itemList.length); 37 }) 38 }, 39 mounted :function () { 40 console.log('mounted'); 41 this.getItems() 42 } 43 44 } 45 46 } 47</script>

main.js

vue.js

1import Vue from 'vue' 2import './plugins/vuetify' 3import App from './App.vue' 4import router from './router' 5import store from './store' 6 7Vue.config.productionTip = false 8new Vue({ 9 router, 10 store, 11 render: h => h(App) 12}).$mount('#app'); 13

App.vue

vue.js

1<template> 2 <v-app> 3 <v-toolbar app> 4 <v-toolbar-title class="headline text-uppercase"> 5 <router-link to="/"> 6 <v-btn color="primary">Home</v-btn> 7 </router-link> 8 <router-link to="/item"> 9 <v-btn color="primary">商品</v-btn> 10 </router-link> 11 </v-toolbar-title> 12 <v-spacer></v-spacer> 13 </v-toolbar> 14 <v-content> 15 <router-view/> 16 </v-content> 17 </v-app> 18</template> 19 20<script> 21export default { 22 name: 'App', 23 components: { 24 }, 25 data () { 26 return { 27 // 28 } 29 }, 30} 31</script> 32

router.js

vue.js

1import Vue from 'vue' 2import Router from 'vue-router' 3import Home from './views/Home.vue' 4import Item from './views/Items.vue' 5 6 7Vue.use(Router) 8 9export default new Router({ 10 mode: 'history', 11 base: process.env.BASE_URL, 12 routes: [ 13 { 14 path: '/', 15 name: 'home', 16 component: Home 17 }, 18 { 19 path: '/item', 20 name: 'item', 21 component: Item 22 } 23 ] 24}) 25

index.html

index.html

1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <link rel="icon" href="<%= BASE_URL %>favicon.ico"> 8 <title>golangEC</title> 9 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"> 10 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons"> 11 </head> 12 <body> 13 <noscript> 14 <strong>We're sorry but golang_ec doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> 15 </noscript> 16 <div id="app"></div> 17 <!-- built files will be auto injected --> 18 </body> 19</html> 20

試したこと

Items.vuegetItems ()の結果を取得できることはコンソールに出力することで確認できました。
下記が取得できるjsonデータです。

{"items":[{"id":1,"name":"APPLE","price":100},{"id":2,"name":"ORANGE","price":300},{"id":3,"name":"BANANA","price":200}]}

mountedメソッドに記述してあるconsole.log('mounted')でコンソール上に出力されないことからmountedメソッドの定義方法が原因だと思っています。

どうかお力添えをお願い申し上げます。

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

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

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

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

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

guest

回答1

0

ベストアンサー

mountedはmethodsの中ではなく、export defaultされているVueオブジェクトの直下に定義します。

以下のコードで動作しないでしょうか?

js

1<script> 2 import axios from 'axios' 3 export default { 4 data () { 5 return { 6 itemList: [] , 7 8 headers: [ 9 { text: 'ID', align: 'left', sortable: true, value: 'id'}, 10 { text: '商品名', sortable: true,value: 'name' }, 11 { text: '価格',sortable: false, value: 'price' }, 12 ], 13 } 14 }, 15 methods: { 16 // ユーザ一覧 17 getItems () { 18 this.itemList = []; 19 axios.get("http://localhost:8888/item") 20 .then( response => { 21 this.itemList = response.data; 22 console.log("Index : record num=" + this.itemList.length); 23 }) 24 }, 25 }, 26 mounted() { 27 console.log('mounted'); 28 this.getItems() 29 } 30 } 31</script>

投稿2019/06/26 13:12

KuwabataK

総合スコア306

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

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

退会済みユーザー

退会済みユーザー

2019/06/26 13:27

mountedに書いたものがコンソールに出力できました! ありがとうございます!!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問