Vue.js3で親コンポーネントから子コンポーネントのpropsへ動的な値を渡す方法がわからなくて困っています。

Question

Vue.js3で親コンポーネントから子コンポーネントのpropsへ動的な値を渡す方法がわからなくて困っています。

参考URL
https://rennnosukesann.hatenablog.com/entry/2019/09/12/185701

html側の設定として、オブジェクトにラップしたものを　v-bind:props-id="{ propsId }　のようにし、
配列の文字として受け取るようなことの記載があったのですが、

どなたかご存知であれば教えて下さい。

<div id="app">   
    <button type="button" v-on:click="testAction()">TestAction</button>
        
    <modal-component ref="child1" v-bind:props-id="{ propsId }"></modal-component>
</div>

<script type="text/x-template" id="modal-component-id">
    <div>
        modal component
    </div>
</script>

const modalComponent = {
    template: "#modal-component-id",

    props: [ "propsId" ],

    data() {
        return {
            // 取得できなかった
            id: this.propsId
        }
    },

    methods: {
        initialModal() {
            // 検証用　this.idは失敗している、this.propsIdは1回目は取得失敗、2回目は取得される
            const id1 = this.id; 
            const id2 = this.propsId;

            console.log("ok");
        },
    }
};

const app = Vue.createApp({
    data() {
        return {
            propsId: "0"
        }
    },

    components: {
        "modal-component": modalComponent
    },

    methods: {
        testAction() {
            // 検証用にランダムの整数文字　1～10
            this.propsId = Math.floor(Math.random() * 10).toString();
            
            this.$refs.child1.initialModal();
        }
    }
});

app.mount("#app");

Comments

[sousuke]

this.props[0]の記述方法は正しいのですか？
this.propsId.xxxとかではなく？

[mee12]

コメントありがとうございます。
確かにthis.propsIdのように取得するようですが、
ボタンクリックの1回目は取得できなく、2回目は取得される状態です。

サンプルコードを検証用に修正します。

Answer 1

<modal-component ref="child1" v-bind:props-id="{ propsId }"></modal-component>

親のpropsIdに'0'が入っているのであれば
{ propsId } はjsのオブジェクト的に書くと

  var propsId = '0'
  var props = { propsId }
  console.log(props.propsId) --'0'
コード

こうなるはずなので初期値の取得は

    data() {
        return {
            // 取得できなかった
            //id: this.propsId
            // this.propsIdまでが上記例えではprops
           id : this.propsId.propsId
        }
    },

↑こうなるのでは？

Comments

[mee12]

ご回答ありがとうございます。

this.propsId.propsIdで値がを取得することができました。
ただし、私の環境ではdata内で更新することができず、
data() {
return {
// id : this.propsId.propsId
}
},

次のようにメソッドのイベントでしか値の取得ができませんでした。
methods: {
initialModal() {
const id = this.propsId.propsId;
console.log("ok");
},
}

できればdata内で値を取得、更新できればよいですが、動的に更新したい場合は、dataでの更新はできないのかもしれませんが。

[sousuke]

よくわからないですけど
https://jsfiddle.net/3ugq41j5/2/
こういうことですか？

提示のコードで実行したところ「id:this.propsId.propsId」で子の初期値のdata.idに値が
入りましたので他のコードに何かあるのだと思います。

それはそれとして値を独立させたければdata、親に依存したければcomputedでいいと思います。

[mee12]

コードで教えていただきありがとうございます。
コードを参考にさせていただき、検証していましたが、すみませんがよくわからなく、

・dataのような書き方ができなく
data() {
return {
// id : this.propsId.propsId
}
},

・メソッド内では実行でき、component内のthis(data部)にセットできるので、問題ないのかもしれません。
methods: {
initialModal() {
this.id = this.propsId.propsId;
console.log("ok");
},
}

[sousuke]

https://jsfiddle.net/y3Lrze04/
できると思いますが…実行直後親のpropsIdの１が見えていますし、ここを変更すれば実行直後に変わります。
質問者さんがどういうことをしたいのかよくわかりません。
親のpropsIdが変化したときに子のidが動的に変更されている方がいいのか
そうでないのかどちらでしょうか？

上のサンプルは親のpropsIdに子のidが依存しているサンプルです。
なので親側でpropsIdを変化させると即座に子のidが変化しています。
(incrementボタンで親のpropsId++すると子の表示も同様に増えています）

[mee12]

教えて頂いたコードをもう一度確認したところ、できない感じでした。

incrementを実行した後で、TestActionを実行しても、コンソール上で親のidは変化していましたが、子のidは変化していません。

やりたいことは　親のボタンを実行　→　子のmodalComponentにIdを渡すことです。

ですので、dataを使わずとも、親のボタンを実行して、子のメソッド内でidの値が取得できているので、
動作は問題ありませんでした。

ありがとうございます。

[sousuke]

「教えて頂いたコードをもう一度確認したところ、できない感じでした。」
data() {
return {
id : this.propsId.propsId
}
},
このコードは変数に値を代入するコードであって、書いてある通りにできています。

同じように書くと以下のような感じで
var propsId = { propsId : 0 }
propsId.propsId = 5
var child = { id : propsId.propsId };
propsId.propsId = 10

console.log(child.id);
↑変数child.idは10ではなく5です。child.idはpropsId.propsIdと同一視しているのではなく
その時の値を代入しているだけです。なので一度代入したらもう変わりません。

var child = { id : 5 };
としているのと同じです。追従するというような特殊効果はもともとありません。

[mee12]

詳しいご説明ありがとうございました。とてもよく理解できました。

もともとdata内で代入できるのは1回限りなんですね。

親から子へIdの数値を渡したい時は、メソッド内に書く必要がありますね。

[mee12]

もう一度動作させてみましたが、親の変更を子が受け取るようなことができませんでした。

(例)
1回目: 親:9　子:0
2回目: 親:3　子:9

動作させたソースの変更がありますので、質問を移動しました。
もしよろしければご確認お願いします。

Answer 2

未解決のためクローズします