首页 文章

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

提问于
浏览 次
1

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

当然，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循环中表的一部分：

<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 warn]：属性或方法“course”未在实例上定义，但在呈现期间引用 . 确保在数据选项中声明反应数据属性 . （在组件中找到）

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

3-未捕获TypeError：无法读取未定义的属性'pivot'

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

javascript laravel vue.js vuejs2 vue-component

2 回答

  • 1

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

    • 转到Vuejs单个文件组件页面 .

    • 在他们的模板中，您会发现在Laravel示例文件的脚本标记中写入的不是 export default ，而VueJs的模板有 module.exports ，我在文件中交换了这些，一切正常 .

    我不知道怎么也不知道为什么，不幸的是我缺乏该领域的知识，但至少问题已经解决了 .

    回复于
  • -1

    你在某个地方有id =“app”的div吗？另外，尝试在create（）函数生命周期钩子内运行mounted（）代码 . 我不确定如果你在mount（）方法中初始化你的数据，vue是否会接受对模型的更改 .

    此外，您应该定义您的课程对象，其中包含网络调用设置时所具有的所有属性

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

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

    回复于

相关问题