javascript - Vue-Laravel表格提交

我在vue中创建了一个表单，并将其添加到 Blade 页面。

app.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模型时，出现错误消息Property or method "name" is not defined on the instance but referenced during render.，我确定name是在data属性中定义的。另外，<advice-form></advice-form>放置在 Blade 页面的#app div中。

谁能帮我找出问题所在？

最佳答案

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

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>