Vue-Laravel 表单提交答案

【问题标题】：Vue-Laravel form SubmissionVue-Laravel 表单提交
【发布时间】：2020-02-25 12:17:33
【问题描述】：

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

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-model 时，我收到一条错误消息，指出 Property or method "name" is not defined on the instance but referenced during render. 我确定 name 是在 data 属性中定义的。此外，<advice-form></advice-form> 位于刀片页面的#app div 中。

谁能帮我找出问题所在？

【问题讨论】：

您确定AdviceForm组件的数据字段中有“名称”吗？
@Piyush 是的，先生，当然。
在这种情况下，我们需要一个工作演示来检查它......
你看过这个问题吗？ stackoverflow.com/questions/42908525/…
为什么在方法中使用数据？你应该把它和方法放在一起，而不是放在方法里面。

标签： javascript php laravel vue.js

【解决方案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>

【讨论】：

这是一个错误，如果没有其他人查看我的代码，我是无法发现的。非常感谢兄弟

【解决方案2】：

我没有看到 AdviceForm 的完整代码库，但可以肯定的是，问题是指出 name 属性未定义并且 vue 找不到该属性。

下面是这样的

新的 Vue({ 数据： { 名称：'名称' } }).$mount('#app');

@Tes3awy 我认为这可能是个问题。请在 Vue 类中声明数据函数。

new Vue({
    router,
    components: {
        'advice-form': AdviceForm,
    },
   data() {
        return {
          name: ''
        };
     }

}).$mount('#app');

【讨论】：

可以添加以下数据功能吗？
是的。请尝试仅删除方法属性并仅声明数据函数。
@Tes3awy 请检查更新的答案并尝试在 app.js 中删除数据功能。
我对此表示怀疑。 Vue 实例是父组件，它使用子组件AdviceForm。 AdviceForm 应该照顾好自己，data 应该只在 AdviceForm 上。