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

Question

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

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

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

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

3・２の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
 
    }

}

Answer 1

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

質問に回答します。

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

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

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

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

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

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

Comments

[yoyoyoyogi]

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

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

return hoge1;
return hoge2;

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

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

[Arice_Banan]

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] }}
のようにすれば中身を呼び出せます。

[yoyoyoyogi]

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

Answer 2

dataの記法を間違えていませんか？？？
正しくは、下記の様に記述します。

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

Comments

[yoyoyoyogi]

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

[FrontEnd_Japan]

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

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

[yoyoyoyogi]

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