successdav
175
1
Vue

Rendering Computed Properties in Vuejs

Posted 2 months ago by successdav

Short Story

I created two computed properties courses and paths from a property subject, that basically sort out items with type_id === 1 into courses and type_id === 2 into paths I want to display this computed properties on a page but nothing shows for items that has content on courses and paths.

I view this on vue console and it shows clearly that courses is an array with 2 items and paths is an array with 4 items but it doesn't render on the page

Detailed explanation

I have a data property subjects

data () {
        return {
            active: false,
            subjects: {},
            selected: 'saepe'
        }
    },

and two computed properties from subjects. when a user hovers over a specific subject, I want to retrieve the courses associated with the subject. some of the courses are singleCourses while some are paths indicated by type_id

computed: {
    // here I am sorting out the hovered course from subject then store to data, then sort data and return  only courses whose type_id is 1

        courses () {
            let courses = [];
            let data = [];
            for (var i = this.subjects.length - 1; i >= 0; i--) {
                if (this.selected.id == this.subjects[i].id) {
                    data = this.subjects[i]['courses'];
                }
            }
            for (var i = data.length - 1; i >= 0; i--) {
                if (data[i].type_id === 1) {
                    courses.push(data[i]);
                }
            }
            return courses;
        },

// here I am sorting out the hovered course from subject then store it to data, then sort data and return   only courses whose type_id is 2 as path

        paths () {
            let paths = [];
            let data = [];
            for (var i = this.subjects.length - 1; i >= 0; i--) {
                if (this.selected.id == this.subjects[i].id) {
                    data = this.subjects[i]['courses'];
                }
            }
            for (var i = data.length - 1; i >= 0; i--) {
                if (data[i].type_id === 2) {
                    paths.push(data[i]);
                }
            }
            return paths;
        }

now when I view this on console, it works fine, when I mouseover a subject it get the subject sort the course with type_id 1 to courses and courses with type_id 2 to paths but when I render it on the browser

<!-- Courses inside of Subjects -->
                    <div class="flex-child-grow grid-x">
                        <div class="small-6">
                           <ul>
                              <li v-for="path in paths">
                                  <a href="" v-text="path.title"></a>
                              </li>
                            </ul> 
                        </div>
                        <div class="small-6">
                            <ul>
                              <li v-for="course in courses">
                                  <a href="" v-text="course.title"></a>
                              </li>
                            </ul> 
                        </div>           
                    </div>

and here is the problem, nothing displays for any subject that has items in courses and paths

Please sign in or create an account to participate in this conversation.

Reply to

Use Markdown with GitHub-flavored code blocks.