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

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

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

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

Q&A

解決済

1回答

3243閲覧

状況によってdata内で算出プロパティが動くときと動かないときの違いを教えていただけないでしょうか?

m0a

総合スコア708

Vue.js

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

0グッド

0クリップ

投稿2019/04/06 04:16

まずこちらに検証環境を用意しています。

https://vue-study01.stackblitz.io

Vue.data に関する挙動についての質問となります。
問題を単純化したコードをいかに示します。

  • index.html

html

1<div id="app"> 2 <test yes_or_no="yes"></test> 3</div>
  • index.js

js

1import Vue from 'vue' 2 3Vue.component('test', { 4 props:{ 5 yes_or_no:{ 6 type:String, 7 required:true, 8 } 9 }, 10 // これを復活させると求める挙動となる 11 // created(){ 12 // this.expectTrue=this.computedValue; 13 // }, 14 data(){ 15 console.log('this.yes_or_no = ',this.yes_or_no) 16 console.log('this.computedValue = ',this.computedValue) 17 return { 18 expectTrue: this.computedValue 19 } 20 }, 21 computed:{ 22 computedValue(){ 23 return this.yes_or_no === 'yes' 24 } 25 }, 26 template: '<b>{{expectTrue}}</b>' 27}) 28 29const App = new Vue({ 30 el: '#app' 31})
  • console出力
this.yes_or_no = yes this.computedValue = undefined

期待する結果としては画面上にtrueが出ることなのですが出力されません。
理由としてはdata内の初期化に算出プロパティが使えないためだと推察できるのですが、
状況によってはdata内で算出プロパティが使えるようです。(とはいえdata内で算出プロパティを動かすパターンは単純化で再現できませんでした)

状況によってdata内で算出プロパティが動くときと動かないときがある理由をご教授おいただけないでしょうか?
(そもそもVue.jsにおいてdata内で算出プロパティを使うのは禁止だったりしますでしょうか?)

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

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

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

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

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

guest

回答1

0

自己解決

https://forum.vuejs.org/t/computed-properties-in-data/11231

上記によりますどdata生成タイミングでは算出プロパティは使えない とのことでした。
したがって、

状況によってdata内で算出プロパティが動くときと動かないときの違いを教えていただけないでしょうか?

というのはなにかの拍子で、data内で算出プロパティが動くときがあったとしても、
そもそもdata内で算出プロパティを使うべきではなさそうです。

投稿2019/04/06 04:42

m0a

総合スコア708

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問