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

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

ただいまの
回答率

89.06%

vue.js computedの戻り値の表示について オブジェクトの扱い

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 133

yoyoyoyogi

score 42

vue.jsを使いある選択肢を選んだ場合に、複数の値を変更したい、という事をやっています。
現状うまく動きません。

input要素で選ばれた値をcomputedの中にifで条件分岐をして、その内容により複数の値を変更しています。
現状の質問としましては

1・computedの戻り値を複数取れると簡単なのに取れないんですが、複数の戻り値って取れないのでしょうか?

2・なので現状はcomputedの戻り値をフックにして、dataのプロパティの書き換えでobjectにしてみてるのですが、html内の{{}}構文でcomputed実行するとオブジェクトが全部表示されてしまいます、実行時に特定の値だけ取得する事は出来ないでしょうか?

3・2のcomputed実行後であれば特定の値を{{}}の構文内で呼び出せます。今の知識での運用上、一度computedを実行した後に値を取り出して表示すれば良いと思っているのですが、computedの実行って{{}}構文内以外に出来ないでしょうか?
cssのhiddenや、html的に意味をなさない箇所で実行も考えましたが、無理くりすぎてきちんと理解したいと思いまして。

4・そもそも、やりたい事に対してこのアプローチは正しいのでしょうか?

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

エラーメッセージ

該当のソースコード

<p>{{hogecom}}</p>
//現状だとここで {hoge1:5000 , hoge2:7 , hoge3:120000} と全部表示されるhogecom.hoge1とするとhogecom実行前なので反応しない

<P>{{hogecom.hoge1}</p>
//ここで初めて狙ったhoge1の値を表示出来る
data:{
  hoge1:'',
  hoge2:'',
  hoge3:'',
  ob1: {
      hoge1:5000,
      hoge2:7,
      hoge3:120000,
   },
  ob2: {
      hoge1:77000,
      hoge2:999,
      hoge3:650,
   },
   hogeselect:hogeselects

},

computed:{
  hogecom:function() {
//select1,2はhtml中のインプット要素でユーザーが選択します。
    if(a==="select1") {
       return hogeselects = this.ob1

    }
    if(a==="select2") {
       return hogeselects = this.ob2

    }

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

まず、
FrontEnd_Japanさんも書かれていますが、dataの記載方法が間違っています。
ご確認ください。

質問に回答します。

1・computedの戻り値を複数取れると簡単なのに取れないんですが、複数の戻り値って取れないのでしょうか?

computedはifで条件分けした場合は、必ずelseでのreturnも記載しなければいけません。

computedはdata等に登録された値を参照した値をもとに値を動的に算出する(明示的に呼び出さなくても自動的に算出)ところなので、条件にマッチしなかったからといって何もreturnしないことは用途から外れています。

複数の戻り値って取れないのでしょうか?

の意味がよく理解できなかったのですが、
「computedで複数の選択肢の中から特定の値をreturnしたい」
という事でしょうか?
それなら下記のように
「"正"または"負"の値をhogeNumberからreturn出来ます。」

data: function() {
  return {
    hogeNumber : 1
  }
}

computed:{
  OK_Ex:function() {
    if(hogeNumber >= 0) {
      return "正"
    } else {
      return "負"
    }
  },
  NG_Ex:function() {
    if(hogeNumber >= 0) {
       return "正"
    }
    if(hogeNumber < 0) {
       return "負"
    }
  }
}

2・なので現状はcomputedの戻り値をフックにして、dataのプロパティの書き換えでobjectにしてみてるのですが、html内の{{}}構文でcomputed実行するとオブジェクトが全部表示されてしまいます、実行時に特定の値だけ取得する事は出来ないでしょうか?

computed{{ }}について誤解されています。

{{ }}computedに登録した関数を呼び出して実行している」のではなく、
computedで算出された{{ }}で呼び出している」です。

なので、computedでOK_EXのようにきちんと場合分けで出来ていれば、特定の値だけ取得する事は可能です。

3・2のcomputed実行後であれば特定の値を{{}}の構文内で呼び出せます。今の知識での運用上、一度computedを実行した後に値を取り出して表示すれば良いと思っているのですが、computedの実行って{{}}構文内以外に出来ないでしょうか?

先にも書きましたが、computedは「登録された値を参照した値をもとに値を動的に算出」されます。

何度も書きますが、「computedはifで条件分けした場合は、必ずelseでのreturnも記載しなければいけません。」を守ってください。

4・そもそも、やりたい事に対してこのアプローチは正しいのでしょうか?

例えば、
「数字を入力するフォームがあって、入力された値と5の四則演算を求めたい」

ならば、今回のアプローチは間違ってはいないと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/08/02 07:46

    ありがとうございます。
    ご指摘の箇所を修正して試してみます、elseが必ず必要とは知りませんでした、ありがとうございます。

    また、複数の戻り値の件ですがわかりにくくてすいません。

    return hoge1;
    return hoge2;

    の様に単純にreturnが沢山書ければ楽なのに、という意味でした。
    ちなみに

    return {
    hoge1,
    hoge2
    }
    は書ける様なのですが取り出し方がわからず
    {{}}
    で記載すると
    {hoge1,hoge2}
    と表示されてしまう、という質問でした。

    キャンセル

  • 2020/08/03 09:22

    computedでreturn文を2回以上書くのは私の環境では
    Unreachable code.
    と到達不可能をESLintに判定されて、実行させてもらえません。

    おそらくそのやり方は間違っています。

    また、複数返却したい場合は、
    のように"key":"value"のJSON形式のオブジェクトや配列にし、

    data: function() {
    return {
    hoge : "ほげ",
    piyo : "ぴよ"
    }
    },

    computed:{
    testJSON : function(){
    return {
    hoge: this.hoge,
    piyo: this.piyo
    }
    },
    testArray : function() {
    return [this.hoge, this.piyo]
    }
    }

    呼び出すときは
    {{ testCom.hoge }}
    {{ testArray[0] }}
    のようにすれば中身を呼び出せます。

    キャンセル

  • 2020/08/06 07:51

    ありがとうございます。
    試してみます。
    勉強になりました。

    キャンセル

+1

dataの記法を間違えていませんか???
正しくは、下記の様にきさ

data() {
  return {
    hoge1: '',
    hoge2: '',
    hoge3: '',
    ob1: {
        hoge1: 5000,
        hoge2: 7,
        hoge3: 120000
    },
    ob2: {
        hoge1: 77000,
        hoge2: 999,
        hoge3: 650
    }
  }
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/08/02 07:49

    ありがとうございます。
    入門書から入っているんですが、最初私の質問の書き方学んで、コンポーネント学ぶ辺りからdataももの書き方と記載されている本が多かったです。
    ある本は、だから最初からその書き方が良いと書いてあるんですが、
    それぞれのメリットデメリットが分からないのでとりあえず入門用の書き方で書いてみました。
    よろしければそれぞれの意味といいますか使い方を教えてもらえると嬉しいです。

    キャンセル

  • 2020/08/05 18:23

    メリット・デメリットというよりは記法ですね。
    https://jp.vuejs.org/v2/api/#data

    Vueの記載も1ファイルすべてを記載するとより良い回答を望めるかもしれません。

    キャンセル

  • 2020/08/06 07:52

    ありがとうございます。
    色々試してみます。

    キャンセル

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

  • ただいまの回答率 89.06%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る