javascript - Vue-Laravel 表单提交

Question

我有一个在 vue 中创建并添加到 Blade 页面的表单。

应用程序.js

new Vue({
    router,
    components: {
        'advice-form': AdviceForm,
    }
}).$mount('#app');

Blade .php

<div class="my-6">
    <advice-form></advice-form>
</div>

AdviceForm 组件

<template>
  <input
    class="md:w-auto w-full"
    type="text"
    name="name"
    id="name"
    placeholder="Full name"
    v-model="name"
/>
</template>

<script>
  export default {
    name: "AdviceForm",
    methods: {
      data() {
        return {
          name: ''
        };
      }
    }
  };
</script>

当我尝试为输入添加 v-model 时，我收到一条错误消息 Property or method "name" is not defined on the instance but referenced during render.我确信 name在数据属性中定义。此外， <advice-form></advice-form>放置在 Blade 页面的#app div 中。

谁能帮我找出问题所在？

Answer 1

将您的脚本更改为以下内容，并尽量不要使用任何保留关键字。

new Vue({
    router,
    components: [AdviceForm],
}).$mount('#app');

<script>
  export default {
    name: "AdviceForm",
    // data should be function outside the 
    // methods and try a non reserved keyword.
    data: function() {
      return {
        form_name: ''
      };
    },
    methods: {
       // All the methods
    },
    components: []
  };
</script>