Vue-Laravel form Submission

Question

I have a form created in vue and added to a blade page.

app.js

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

blade.php

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

AdviceForm Component

<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>

When I try to add v-model for inputs I get an error saying Property or method "name" is not defined on the instance but referenced during render. I am sure the name is defined in the data property. Also, the <advice-form></advice-form> is placed within the #app div in blade page.

Can anyone help me figure out what is the problem?

Are you sure the "name" is there in data field of AdviceForm component? — Piyush, Oct 30 '19 at 08:42
Have you looked at this question? https://stackoverflow.com/questions/42908525/vue-warn-property-or-method-is-not-defined-on-the-instance-but-referenced-dur — chakeda, Nov 08 '19 at 17:19
Why you are using data inside methods? You should put it along with methods, not inside methods. — Ilyas karim, Nov 08 '19 at 18:37

Kalesh Kaladharan · Accepted Answer · 2019-11-08T18:53:14.253

6

Change your script to the following and try not to use any reserved keywords.

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>

edited Nov 08 '19 at 18:53

answered Nov 08 '19 at 18:35

Kalesh Kaladharan

1,038
1
8
26

It was a mistake that I couldn't have found without someone else looking at my code. Thanks a lot bro – Tes3awy Nov 08 '19 at 18:56

Rise · Answer 2 · 2019-11-08T18:45:44.360

0

I don't see full code base for AdviceForm but surely, issue is pointing out that name property is not defined and vue can't find that property.

Something like this below

new Vue({ data: { name: 'name' } }).$mount('#app');

@Tes3awy I think this can be problem. Please declare data function inside Vue class.

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

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

edited Nov 08 '19 at 18:45

answered Nov 08 '19 at 17:51

Rise

1,493
9
17

Can you add below data function? – Rise Nov 08 '19 at 18:33
Yes. Please try to remove methods property only and declare data function only. – Rise Nov 08 '19 at 18:37
@Tes3awy Please check updated answer and try decare data function in app.js. – Rise Nov 08 '19 at 18:46
I doubt this. The Vue instance is the parent component and it uses a child component `AdviceForm`. `AdviceForm` should take care of itself, and the `data` should be on `AdviceForm` only. – Kalesh Kaladharan Nov 08 '19 at 18:55

Vue-Laravel form Submission

2 Answers2