我是Vuejs的初学者,我试图加载这个组件但是它没有工作,首先我得到了这个课程.pivot未定义,mount()上的console.log没有被触发即使我试图只记录一个字符串,我也从视图中传递了一个概要,但是我认为它没有被渲染,我试图用数据上的变量替换路线()例如(问候:'嗨那里')并在模板中使用{{greetings}}回显它,我得到一个错误,问候是未定义的,即使删除了一些必要的功能以使组件加载,当我按下按钮我知道onSubmit也没有在实例上定义,所以如果我的代码是正确的(这可能不是这样),这意味着我还缺少其他东西,我&# 39;使用elixir和gulp对这些文件进行版本控制,并且它们在浏览器中正确加载,即使示例组件没有正确加载,mount()方法也不会触发,不知道是什么&# 39;继续
航向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警告]:财产或方法&#34;当然&#34;未在实例上定义,但在呈现期间引用。确保在数据选项中声明反应数据属性。 (在组件中找到)
2- [Vue warn]:呈现组件时出错:
3-未捕获的TypeError:无法读取属性&#39; pivot&#39;未定义的
我最终想做的只是根据课程的状态改变颜色的按钮,无论是否完成,都是这样。
答案 0 :(得分:1)
你在某处拥有id =“app”的div吗?另外,尝试在create()函数生命周期钩子内运行mounted()代码。我不确定如果你在mount()方法中将数据初始化,vue是否会接受对模型的更改。
此外,您应该使用网络调用设置的所有属性来定义您的课程对象
return {
course: {
id: "", name: "", credits: "", etc.....
}
}
如果你不这样做,vue将无法跟踪对这些属性的更改
答案 1 :(得分:-1)
事实证明,由于某些原因,Laravel附带的通用example.vue文件在我的机器/环境中没有按预期工作,也许我有一些没有正确配置的东西,无论如何解决方案很容易:
export default
而不是module.exports
,VueJs的模板有("text" || "search")
,我在文件中交换了这些一切正常。我不知道如何而且我不知道为什么,不幸的是我缺乏该领域的知识,但至少问题已经解决了。