vue3 v-modelのinputにバックエンドからの値を渡す

Question

実現したいこと

vue2からvue3にしています。

<input v-model="zip" value="<?php echo zipValue ?>" >

的なコードがあり、確認画面から戻ってきたり、エラーで戻されたりするとinputの中身が空になります。
原理は理解しているつもりで、v-modelはvueのdata で管理するべきで、HTML側に無理やりシステムからvalueに値を書いても意味がないのかなと思っています。

本来であれば

<?php echo zipValue ?>に値があればv-modelのvalueをjsで書き換える　処理が正しいのかなと思うのですが

HTML側からvueのdataを書き換えるいい方法はないですか？

<?php if zipValue ?>
<script>
vue.zip = <?php echo zipValue ?>
</script>
<? /php if zipValue ?>

とするしかないですか？

Answer 1

バックエンドがPHPでもPythonでもRubyでもJSフレームワーク上の考えは一緒ですが、ダイレクトにPHPファイルから引っ張ってくるよりaxiosなどを使ったほうがいいです。

Vueでやりとりするものは基本JavaScriptと同じだと考えたほうがいいです。だとすると、バックエンドからデータを引っ張ってくるのはIO部分、すなわちライフサイクルフックからのみにしてください。

v-modelはあくまでスクリプト内での同期データを制御するものです。なのでrefで紐付けるのが一番手っ取り早いです。

手順としてはまずv-modelとフォームを紐づけてみて、続いてaxiosからの同期を実現、最後に外部ファイルをPHPにするという手順で行けるはずです。

Ajax用のPHPの書き方は従来のjQueryのものでもなんであっても問題ありません。

<template>
    <input v-model="zip" >
</template>
<script setup>
import { ref,onMounted } = 'vue'
const zip = ref(null)
onMounted(()=>{
    zip.value = "axiosを使って引っ張ってきたデータ";
})
</script>