Question

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

Answer 2

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

下面这样的事情

新Vue（{ 数据：{ 名称：“名称” } }）。$ mount（'＃app'）;

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

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

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

Vue-Laravel表格提交

2 个答案: