Форма подачи Vue-Laravel

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

Когда я пытаюсь добавить v-модель для входных данных, я получаю сообщение об ошибке: Property or method "name" is not defined on the instance but referenced during render. Я уверен, что name определено в свойстве data. Кроме того, <advice-form></advice-form> находится внутри #app div на странице blade.

Может кто-нибудь помочь мне разобраться в чем проблема?

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 не может найти это свойство.

Примерно так ниже

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

---

@ Tes3awy Я думаю, что это может быть проблемой. Пожалуйста, объявите функцию данных внутри класса Vue.

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

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