VueJs 单文件组件未读取 data/props/methods

Question

我是 Vuejs 的初学者，我正在尝试加载此组件但它不起作用，首先我了解到 course.pivot 未定义，mounted() 上的 console.log 未触发即使我尝试只记录一个字符串，我也从视图中传递了一个概率，但我认为它没有被渲染，我试图用 data() 上的变量替换 course 例如（问候语：'hi there'）并在模板中使用 {{ greetings }} 回显它，我得到一个错误，即 greetings 未定义，即使在删除了一些必需的功能以加载组件之后，当我按下按钮时，我得到 onSubmit 不是也在实例上定义，所以如果我的代码是正确的（可能不是这种情况），这意味着我还缺少其他东西，我正在使用 elixir 和 gulp 对这些文件进行版本控制，并且它们在浏览器中正确加载，即使示例组件未正确加载，mounted() 方法也未触发，不确定发生了什么。

课程-buttons.vue:

<template>
  <div>

    <button @click.prevent="onSubmit(course)" type="button" v-if="course.pivot.completed === 1" class="btn btn-sm" id="coursetrue"></button>

    <button @click.prevent="onSubmit(course)" type="button" v-if="course.pivot.completed === 0" class="btn btn-sm" id="coursefalse"></button>

  </div>
</template>

<script>
  export default {

    props: ['courseId'],

    mounted() {
      axios.get('/getCourse/' + this.courseId)
      .then((response) => {
        console.log(response)
        this.course = response.data.course
       // console.log('something')
      });
    },

    data: function () {
      return {
        course: ''
      }
    },
    methods: {
      onSubmit: function(course) {
        axios.post('/MyCourses/' + this.course.name)
        .then((resp) => {
          console.log(resp.data)
        });
     }
    }
  }
</script>

我的代码结构可能有误，因为我不知道如何正确处理问题。

这是 courses.blade.php，该组件是 foreach 循环内 table 的一部分：

<tbody>
    @foreach ($courses as $course)
      <tr>
        <td>{{ $course->name }}</td>
        <td>{{ $course->appointment }}</td>
        <td>{{ $course->room_id }}</td>
        <td>
           <form method="POST" action="{{ route('course.completed', $course->name) }}" id="form-submit">
               {{ csrf_field() }}

           <course-buttons :courseId="{{ $course->id }}"></course-buttons>

           </form>
       </td>
     </tr>
   @endforeach
</tbody>

这里我尝试传递课程的id。

这里是 app.js 文件：

require('./bootstrap');

Vue.component('example', require('./components/Example.vue'));

Vue.component('course-buttons', require('./components/course-buttons.vue'));

const app = new Vue({
   el: '#app',
});

当我在 chrome 使用 vuejs devtools 检查这个时，我得到了组件的实例，但它没有显示在实例上声明了任何东西，没有数据也没有道具，这意味着有一个问题。

这是我遇到的错误：

1- [Vue warn]: 属性或方法 "course" 未在实例上定义，但在渲染期间被引用。确保在数据选项中声明响应式数据属性。（在组件中找到）

2-[Vue 警告]：渲染组件时出错：

3- 未捕获的类型错误：无法读取未定义的属性 'pivot'

我最终想要做的只是有一个按钮，它根据课程的状态改变颜色，无论是否完成，仅此而已。

Answer 1

你在某处有一个 ID="app" 的 div 吗？另外，尝试运行 create() 函数生命周期挂钩中的 mounted() 代码。我不确定如果你在 mounted() 方法中初始化你的数据，vue 是否会接受你的模型的变化。

此外，您应该使用网络调用设置它时将具有的所有属性来定义您的课程对象

   return {
        course: {
             id: "", name: "", credits: "", etc.....
         }
      }

如果你不这样做，vue 将无法跟踪对这些属性的更改

Answer 2

事实证明，由于某种原因，Laravel 附带的通用 example.vue 文件在我的 machine/environment 上无法按预期工作，也许我有一些东西不是配置正确，无论如何解决方案很简单：

进入Vuejs单文件组件页面
在他们的模板中，您会发现 Laravel 示例文件的脚本标记中没有写 export default，VueJs 的模板有 module.exports，我交换了这些在我的文件中，一切正常。

我不知道怎么做，也不知道为什么，不幸的是我缺乏这方面的知识，但至少问题解决了。

VueJs 单文件组件未读取 data/props/methods

VueJs single file component not reading data/props/methods

javascript

laravel

vue.js

vue-component

vuejs2