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">&#128077; 47</div>
                    <div class="selected__dislike">&#128078; 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 的区别

Vue2 解决computed返回值未能渲染到DOM的问题

Vue2 解决computed返回值未能渲染到DOM的问题

vue 警告:无效的道具:道具“modalState”的类型检查失败。预期布尔值,得到函数

VSCode自定义代码片段1——vue主模板