テキストエリアのPOST値を直接Vueのdataに渡すとエラーになる

はじめに

PHPでPOST送信した値をVue.jsのdataに直接設定しました。
textareaで改行したデータを使うと、エラーになることが判明しました。

環境

この記事は、以下の管理人の検証環境にて記事にしています。

検証

step.1 ソースコード

下記のソースコードで検証を行います。

<form method="post" action>
  <textarea class="form-control" rows="10" name="text" v-model="text"></textarea>
  <button>送信</button>
</form>
<hr>
<pre>{{text}}</pre>

const text = '<?php echo $_POST['text'] ?? '' ?>'; 
const App = {
  data() {
    return {
      text :text
    }
  }
}
Vue.createApp(App).mount('#app');

step.2 POST送信した結果

コンソールエラーが発生してしまいました。

原因は下記のように改行されるのが問題のようです。

解決方法

Vue.jsのdataの囲みを「`」（バッククォート）に変更することで解決します。

const text = `<?php echo $_POST['text'] ?? '' ?>`; 
const App = {
  data() {
    return {
      text :text
    }
  }
}
Vue.createApp(App).mount('#app');

今日はこの辺でー