CODEWITHSUNDEEP
laravelvue.js
eons
eons

Reputation: 456

computed properties returns undefined

this is code to display students table, i try to use commputed property for students full name but it displays UNDEFINED in the fullname column 

<tr v-for="student in students" :key="student.id">
          <td>{{ student.id }}</td>
         <td><a href="#" class="nav-link">{{ student.index_no | uppercase }} 
         </a></td>
         <td>{{fullname | capitalize}}</td>
         <td>{{fullname | capitalize}}</td>
                <td>{{student.department | capitalize}}</td>
                <td>{{ student.course | capitalize}}</td>
                <td>{{ student.regular_or_weekend | capitalize }}</td>
                <td>{{ student.nationality | capitalize}}</td>
                <td>{{ student.created_at |datetime }}</td>

this is the vuejs code, all the methods works fine with the exception of computed property which displays UNDEFINED. i have excluded the methods

 <script>

import { Form, HasError, AlertError } from 'vform'

export default {

    data () {
        return {
            editmode : true, // for edit conditional
            students: {}, //student object

            // Create a new form instance
            form: new Form({
                    id: '',
                    index_no:'',
                    firstname: '',
                    middlename: '',
                    lastname: '',
                    department: '',
                    course:'',
                    regular_or_weekend:'',
                    nationality:''
                   })
                } //end of data()
            },
      methods:{

           }     
     computed:{
        fullname:function(){
           return this.firstname+" "+this.middlename+" "+this.lastname;
        }
    }
  }
</script>

Upvotes: 2

Views: 1122

Answers (2)

Daniel Elkington
Daniel Elkington

Reputation: 3665

Use a method instead of a computed property, passing in the student.

Template:

<tr v-for="student in students" :key="student.id">
   <td>{{getFullName(student) | capitalize}}</td>

JavaScript:

methods: {
  getFullName (student) {
    return student.firstname + ' ' + student.middlename + ' ' + student.lastname;
  }
}

Upvotes: 0

Perogy
Perogy

Reputation: 334

It appears you have an array of students which means you cannot use a computed property in this way as this implies there is only a single fullname property when in fact there are multiple (one for each student)

You have a couple possible options here. (code untested)

Option 1

Make a new component called Student, and pass the student object from your v-for into it as a prop like so

<tr v-for="student in students" :key="student.id"> <Student :student="student"/> </tr>

the Student component would contain all the HTML to render a single student from the list and you could make your computed property similar to how you did originally now that the Student component is only rendering a single Student. This is probably the "best practice" way to do it.

computed:{ fullname:function(){ return this.student.firstname+" "+this.student.middlename+" "+this.student.lastname; } }

Option 2

You can use a computed property to simply add a new property to your students array

computed:{ studentsWithFullname: function(){ return this.students.forEach(element => { element.fullname = element.firstname + " " + element.middlename + " " + element.lastname }); } }

then iterate over the "studentsWithFullname" array instead of the students array (or whatever you want to call it) and output fullname

Option 3

Don't bother with any of this and just use student.firstname + " " + student.middlename + " " + student.lastname directly in your template as you have done already

Upvotes: 1

Related Questions