キーに対する Vuejs の set 操作が失敗しました: ターゲットは読み取り専用です
<p>Laravel9 と Vuejs3 を使用しています。
php 変数を vue コンポーネントに渡すブレード ビューがあります: </p>
<pre class="brush:php;toolbar:false;"><購読フォーム
location="{{ $props['location'] }}"
方向="{{ $props['方向'] }}"
/>
<p>データを受け取るメイン Vue のスクリプト設定に次のコードがあります。</p>
<pre class="brush:php;toolbar:false;">const initProps =defineProps(['location', 'orientation']);
const 値 = reactive(initProps);</pre>
<p>この親 Vue は次のようなコンポーネントを呼び出します: </p>
<pre class="brush:php;toolbar:false;"><コンポーネント
v-bind:is="ステップ[ステップ]"
v-bind:formValues="値"
></component></pre>
<p>問題は、リアクティブ変数 <code>values</code> を子 vue に書き込むことができないことです。
エラーが発生しました</p>
<pre class="brush:php;toolbar:false;">[Vue warn] キー「location」の設定操作が失敗しました: ターゲットは読み取り専用です。</pre>
<p>次の場合にこれが発生します: </p>
<pre class="brush:php;toolbar:false;">props.formValues.location = location;</pre>
<p>php 変数をブレードから親 Vue に渡す必要がない場合に機能します。しかし、現在はブレードからメインビューまで、次にメインビューからサブコンポーネントまでの 2 レベルのデータプロパティがあり、読み取り専用になっています。 </p>
<p>助けて! </p>
<p><code>initProps</code> または <code>values</code> 変数を const 型から var に切り替えてみましたが、何も起こりませんでした。 </p>
