计算属性返回未定义答案

【问题标题】：computed properties returns undefined计算属性返回未定义
【发布时间】：2019-01-29 23:51:10
【问题描述】：

这是显示学生表的代码，我尝试使用计算属性作为学生全名，但它在全名列中显示 UNDEFINED

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

这是 vuejs 代码，所有方法都可以正常工作，除了显示 UNDEFINED 的计算属性。我已经排除了方法

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

【问题讨论】：

标签： laravel vue.js

【解决方案1】：

您似乎有一个学生数组，这意味着您不能以这种方式使用计算属性，因为这意味着只有一个 fullname 属性，而实际上有多个（每个学生一个）

这里有几个可能的选择。（代码未经测试）

选项 1

创建一个名为 Student 的新组件，并将 v-for 中的学生对象作为道具传递给它

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

Student 组件将包含所有 HTML 以呈现列表中的单个学生，并且您可以使您的计算属性类似于您最初所做的那样，因为 Student 组件仅呈现单个 Student。这可能是做到这一点的“最佳实践”方式。

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

选项 2

您可以使用计算属性简单地将新属性添加到学生数组中

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

然后遍历“studentsWithFullname”数组而不是学生数组（或任何你想调用的数组）并输出全名

选项 3

不要打扰任何这些，只需在模板中直接使用student.firstname + " " + student.middlename + " " + student.lastname，就像您已经完成的那样

【讨论】：

我进行了更改，但全名现在显示为空字符串
这是有道理的，因为当您创建表单实例时，您的名称似乎被初始化为空字符串。尝试将 firstname middlename 和 lastname 设置为空字符串以外的值，看看它是否有效。
{{student.firstname+" "+student.middlename+" "+student.lastname}}。当我使用它时，但我创建了一个函数或计算属性，这就是我得到一个未定义的地方
当我设置名字、中间名和姓氏时它起作用了。我该如何解决这个问题
哦，我明白了，你有很多学生。等我回家后我会修改答案

【解决方案2】：

使用方法而不是计算属性，传入学生。

模板：

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

【讨论】：