73621
現在、サーバーに対してリクエストをして、サーバー側でバリデーション後エラーメッセージを返すプログラムを作成しております。  
エラーメッセージをサーバーから取得した後、エラーの内容をdata.messageに格納後、console.logを用いて表示した結果、正常に値が出力されていました。

それに伴い、リアルタイムでtemplate内のdata.messageが変わると考えていたのですが、変わりませんでした。  
他のプログラムでは、同等の方法を用いることで値は変わっていました。

**試したこと**  
  
必要のない部分をすべて消去し、リアルタイムで値が変更されるか検証しました。  
  
data.messageをv-html等の属性を用いて埋め込めるか検証しました。  
  
data.messageを表示させる階層のパターンを複数試しました。  

```

    <template>
      <link rel="stylesheet" href="/css/selfIntroduction/selfIntroduction.css">
      <p>{{data.message}}</p>
      <section>
        <div class="contact__sec__wapper">
          <div class="unique contact__sec">
            <h1 class="selfIntro__title">Contact</h1>
            <label class="unique contact__form_label">メールアドレス</label>
            <input v-model="data.contactMeil" class="unique contact__form" type="text">
            <label class="unique contact__form_label">名前</label>
            <input v-model="data.contactName" class="unique contact__form" type="text">
            <label class="unique contact__form_label">メッセージ</label>
            <textarea v-model="data.contactContent" class="unique contact__form"></textarea>
            <button class="unique contact__form" @click="contactContentSend">送信</button>
          </div>
        </div>
      </section>
    </template>
    
    <script>
      import { reactive } from 'vue'
      import { store } from '../store.js'
      import axios from 'axios'
    
      export default {
        name: 'Test',
        setup() {
          const data = () => reactive({
            contactMeil: '',
            contactName: '',
            contactContent: '',
            message: [],
            test: '',
          })
          const contactContentSend = () => {
            let formData = new FormData()
            formData.append('mail', data.contactMeil)
            formData.append('name', data.contactName)
            formData.append('content', data.contactContent)
            axios.post(store.state.API_URL + 'contact-send', formData).then((responce) => {
            }).catch((error) => {
              data.message = error.response.data
            })
          }
          return { data, contactContentSend }
        }
      }
    </script>
    
```
CC BY-SA 4.0
2021-01-27T12:02:15.640
73614
2021-04-04T00:55:45.420
2021-04-04T00:55:45.420
32986
37434
question
javascript php laravel vue.js axios
リアルタイムでtemplate内の変数を変化させたいです
`data`に関数が代入されていますが、

```

    const data = () => reactive({
    
```

単純に`reactive`関数の戻り値を代入しなくてはいけません。

```

    const data = reactive({
    
```

Vue 2.xではdataは関数でないといけませんでした。  
（そうでないと、各Vueインスタンスで同じオブジェクトを参照してしまうため）  
3.xのComposition
APIにおいては、各Vueインスタンスの生成時に`setup`関数が呼ばれるようになっているので、関数でラップしてはいけません。
CC BY-SA 4.0
2021-01-28T01:28:56.627
73621
2021-01-28T01:28:56.627
9608
73614
answer