successdav
7 months ago
42
1
Vue

Rendering Computed Properties in Vuejs

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