Vue.js 親画面のチェックボックスの状態を子画面で受け取りたい

Question

vue初心者です。数日調べていて解決できず、質問させていただきます。

＜やりたいこと＞
親画面でチェックボックスのON/OFFの状態により処理を分岐していますが、
子画面でも同じようにチェックボックスの状態を受け取り、処理を分岐させたい。

親画面と子画面にそれぞれ更新ボタンがあるのですが
親画面のみにあるチェックボックスのON/OFFで処理をわけたいです。
親画面の更新処理は実装できています。

＜調べたこと＞
親子間の受け渡しの動きを確認するために
propsで親画面のテキストを子画面で受け取ることろまではできました。

実際はチェックボックスの状態（this.fixedCheck）をpropsで受け取りたいのですが、
子画面の値に親画面のチェックボックスを取得する関数を設定してもうまくいきません。

調べ方やヒントだけでも結構ですので教えて頂けると助かります。
どうぞよろしくお願いいたします。

---省略
 <v-checkbox
    v-model="fixedCheck"
    label="fixed" 
 ></v-checkbox>

<CheckStatus
    :checked="getFixedCheckStatus"                   
/>
---省略

<script>
import CheckStatus from '../components/CheckStatus';
components: CheckStatus 

 if (!this.fixedCheck) {
     OFFの時の処理
  }else{
     ONの時の処理
 }

 getFixedCheckStatus() {
    let res = this.fixedCheck;
    return res;
 },
</script>

export default { 
  components: {  
  },
  props: [   
    'checked',
  ],

 console.log(this.checked);
↓このような値がでて取得できない
(){var e=this.Checkboxes.fixedCheck;return e}

Comments

[murabito]

省略されすぎてて問題がよくわかりません

[hinaruna]

すみません。説明を追記しました。

Answer 1

Computed PropertyをPropsで渡したいのだと思うので、今一度、公式ドキュメントを確認したほうが良いですね。
https://vuejs.org/guide/essentials/computed.html

今はmethodで呼び出してPropsで渡そうとしてるので、methodでよびだしたいならば

<CheckStatus
    :checked="getFixedCheckStatus"                   
/>

ではなく

<CheckStatus
    :checked="getFixedCheckStatus()"                   
/>

ではないですか？

最近vue書いていないのと、動作確認してないので合ってるかわからないですが。。。

参考： method vs computed properties
https://vuejs.org/guide/essentials/computed.html#computed-caching-vs-methods

Comments

[hinaruna]

ありがとうございます！
"getFixedCheckStatus()" に変更したらtrue,falseで取得できました！
公式ドキュメントを確認させて頂きます。
質問する際は詳しく記述するようにいたします。

ずっと解決できず悩んでいました、、大変感謝しております。

[murabito]

解決出来て良かったです！