Vue数据函数返回值，但vue忽略它们

Posted 2021-04-30

有人可以告诉我为什么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