1

Can anyone please tell me why vue is ignoring my data function return values? text, userId, and videoId. Sometimes it doesn't ignore them and a lot of times it does out of nowhere and I'm not sure why. Here is my code. What I get in chrome vue extension is data: $routes but it should be data: text: '', videoId: 213, userId: null $routes. And sometimes it does appear and I have no idea why it does and doesn't at times.

<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>

I get errors such as: Property or method "videoId" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

albert_anthony6
  • 594
  • 2
  • 9
  • 30
  • 1
    might be because sometimes when it's created the `video` prop hasn't been defined yet? I think a `computed` value might be better – A. L May 24 '20 at 05:44
  • are you sure it's the right component throwing this error? I see no reason for it to complain about the reference like that. render doesn't even use userId. or is this code different than the one you're actually using? doesn't look like you even need it and could just use props directly – user120242 May 24 '20 at 06:02
  • Make `videoId` + `userId` `computed` properties rather than returning them from `data()` – Cato Minor May 24 '20 at 19:19

0 Answers0