VueJs 单文件组件不读取数据/道具/方法

Posted 2023-02-23

【中文标题】VueJs 单文件组件不读取数据/道具/方法

【英文标题】：VueJs single file component not reading data/props/methods

【发布时间】：2017-09-01 22:28:42

【问题描述】：

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

课程按钮.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 循环内表格的一部分：

<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',
);

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

这是我遇到的错误：

1- [Vue 警告]：属性或方法“课程”未在实例上定义，但在渲染期间被引用。确保在 data 选项中声明反应数据属性。 （在组件中找到）

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

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

我最终想要做的只是有一个按钮，可以根据课程的状态改变颜色，无论是否完成，就是这样。

【问题讨论】：

"首先我知道 course.pivot 是未定义的" 嗯，是的。当您的组件初始化时，您的data 函数将course 的值设置为''。 course.pivot 在那个时候确实是未定义的，所以你的模板会吐出错误。你稍后会加载course.pivot。

要么将依赖于course 设置的内容放在v-if="course" 中，因此在数据返回之前不会执行它，或者让data 函数为其所有属性设置虚拟值。

【参考方案1】：

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

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

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

【讨论】：

export default 和 module.exports 都是有效的，只是写同一件事的不同方式。如果这解决了您的问题，则其他配置错误。

这样就解决了，正如我所说的其他配置错误。

【参考方案2】：

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

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

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

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

【讨论】：

是的，我确实有一个 id="app" 的 div，正如我提到的，组件已加载但没有定义任何道具或数据，无论如何，我不需要定义课程对象，而是需要 id，课程的名称和状态，我会将它们作为道具传递，但是如果没有读取所有道具，那将没有帮助，设置观察者有什么好处吗？