Vue数据函数返回值,但vue忽略它们
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue数据函数返回值,但vue忽略它们相关的知识,希望对你有一定的参考价值。
有人可以告诉我为什么Vue忽略了我的数据函数返回值吗?文字,用户ID和视频ID。有时它并不会忽略它们,而且很多时候它无处不在,我不确定为什么。这是我的代码。我在chrome vue扩展中得到的是data:$ routes,但它应该是data:text:'',videoId:213,userId:null $ routes。有时确实会出现,但我不知道为什么有时会这样做。
<template>
<div class="selected">
<h2 class="selected__title">{{video.title}}</h2>
<video class="selected__video" :src=video.video controls :poster=video.thumb></video>
<div style="width: 70%;">
<div class="selected__details">
<h3 class="selected__details__views">300 views</h3>
<div class="selected__thumbs">
<div class="selected__like">👍 47</div>
<div class="selected__dislike">👎 3</div>
</div>
</div>
<form class="selected__commentbox">
<label for="comments" class="selected__commentbox__label">Comments</label>
<textarea v-model="text" class="selected__commentbox__textarea" rows="4" id="comments" placeholder="Type a sweet comment..."></textarea>
<button @click="handleSubmit" class="selected__commentBtn">add comment</button>
</form>
<div v-bind:key="comment._id" v-for="comment in video.comments" class="selected__comments">
<Comment v-bind:comment="comment"/>
</div>
</div>
</div>
</template>
<script>
import Comment from './Comment.component.vue';
import axios from 'axios';
export default {
name: 'SelectedVideo',
data() {
return {
text: null,
videoId: this.video._id,
userId: this.user._id
}
},
props: ["video", "user"],
components: {
Comment
},
methods: {
handleSubmit(event) {
event.preventDefault();
this.createComment(this.text, this.videoId, this.userId);
this.text = '';
},
updateComments() {
this.$store.state.newComment = true;
},
async createComment(comment, video, user) {
try{
const res = await axios({
method: 'POST',
url: 'http://localhost:8000/api/v1/comments/',
data: {
comment,
video,
user
}
});
if (res.data.status === 'success') {
// console.log(res);
this.updateComments();
location.reload(true);
}
} catch(err) {
console.log(err.response.data.message);
}
}
}
}
</script>
我收到如下错误:属性或方法“ videoId”未在实例上定义,但在渲染期间被引用。通过初始化属性,确保在data选项中或对于基于类的组件,此属性都是反应性的。
答案
我会说这是因为您将data
声明为命名函数,而不是声明引用匿名函数的键data
,如下所示:
export default {
name: 'SelectedVideo',
data: () => {
text: null,
videoId: this.video._id,
userId: this.user._id
}
,
props: ["video", "user"],
[...]
https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function
以上是关于Vue数据函数返回值,但vue忽略它们的主要内容,如果未能解决你的问题,请参考以下文章
当语法在 vue 组件中看起来很完美时,“外部根元素将被忽略”错误
vue的watch、methods 和 computed 的区别