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

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

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

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

Q&A

解決済

1回答

12947閲覧

Vue.jsのmethodsの呼び出しについて

noripon

総合スコア22

Vue.js

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

0グッド

0クリップ

投稿2019/02/12 07:32

Vue.jsの勉強中なのですが、methodsの動作についてよくわからないことがあり質問させてください。

以下のコードについてですが、切り替えボタンを押すと、listの表示がpriceの昇順/降順になります。
このとき、list表示と無関係の {{ methodsData() }} の部分が書き換わります。また、console.logで出力してみるとmethodsData()が2回呼ばれています。

なぜmethodsData()が呼ばれるのか教えて頂けましたら幸いです。
よろしくお願いいたします。

(環境:Windows10, Google Chrome v72.0.3626.96, vue@2.5.21)

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<title>Vue.jsの勉強</title> 6</head> 7<body> 8<div id="app"> 9 10 <p>{{ computedData }}</p> 11 <p>{{ methodsData() }}</p> 12 13 <button v-on:click="order=!order">切り替え</button> 14 <ul> 15 <li v-for="item in limited" v-bind:key="item.id"> 16 {{ item.name }} {{ item.price }} 円 17 </li> 18 </ul> 19 20</div> 21 22<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script> 23<script src="main.js"></script> 24</body> 25</html>

javascript

1new Vue({ 2 el: '#app', 3 data: { 4 list: [ 5 { id: 1, name: 'りんご', price: 100}, 6 { id: 2, name: 'ばなな', price: 200}, 7 { id: 3, name: 'いちご', price: 400}, 8 { id: 4, name: 'おれんじ', price: 300}, 9 { id: 5, name: 'めろん', price: 500} 10 ], 11 order: false 12 }, 13 14 computed: { 15 computedData: function() { 16 console.log("computedData") 17 return Math.random() 18 }, 19 20 sorted: function() { 21 return this.list.sort(function(a, b) { 22 return this.order ? b.price - a.price : a.price - b.price; 23 }.bind(this)) 24 }, 25 limited: function() { 26 return this.sorted.slice(0, this.limit) 27 } 28 }, 29 30 methods: { 31 methodsData: function() { 32 console.log("methodsData") // 2回呼ばれるみたい 33 return Math.random() 34 } 35 } 36})

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

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

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

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

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

guest

回答1

0

ベストアンサー

はじめまして!

HTMLテンプレートの中に{{methodsData()}}という記述をした理由はなんでしょうか?

methodsはfunctionのことなので、このように書くとHTMLが描画された時点でmethodsDataが一回実行されてしまいます。また、二回呼ばれている理由ですが、初回の描画で一回、切り替えボタンのクリックでvueによるDOM要素の更新が走って二回目ということではないかと思います。

投稿2019/02/12 08:45

yu-smc

総合スコア610

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

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

noripon

2019/02/12 10:21

ご回答ありがとうございます。 HTMLテンプレートのなかにメソッドを記述した理由は「基礎から学ぶVue.js」のサイトで使われていたためです(https://cr-vue.mio3io.com/guide/chapter4.html#算出プロパティのキャッシュ機能)。ちなみに申し訳ないのですが書籍は購入してないです。 Vueの描画(DOM要素の更新)処理が li 要素の部分だけでなくP要素の部分にもかかるためメソッドが実行されているということで納得しました。たしかにこのような更新が不要であれば算出プロパティを使えばよさそうですし、メソッドはそういう動作をするものと覚えました。 ご教授ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問