Question

这是显示学生表的代码，我尝试将commpulated属性用于学生的全名，但在全名列中显示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>

Answer 1

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

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

选项1

制作一个名为Student的新组件，并将v-for中的Student对象作为道具传递给它，就像这样

<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”数组而不是students数组（或任何您想调用的数组）并输出全名

选项3

不必理会任何这些，只需像已经做过的那样直接在模板中使用student.firstname + " " + student.middlename + " " + student.lastname

Answer 2

使用方法代替学生的计算属性。

模板：

#load library
require(data.table)

# convert data.frame to data.table
setDT(df)

# make a new data.table with two columns. First one has the counts by each level of firstcol. Second one has the count minus the number of NA cases:
df[, .(FirsrcolCount = .N, 
       secondCol = .N - sum(is.na(secondcol))), 
     by = firstcol]

JavaScript：

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

计算的属性返回未定义

2 个答案:

选项1

选项2

选项3