Vue.js making object.length value reactive-CodePudding

Trying to display Total records. Students.length works the first time on page load thanks to the created() method. However, calling filteredStudents(), is out of date. What is the easiest way to make this reactive?

<template>
        <div >
          Total record(s): {{ recordCount }}
        </div>

    <table >
        <thead >
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="student in filteredStudents()" :key="student._id">
                <td>{{ student.firstName }}</td>
                <td>{{ student.lastName }}</td>
                <td>{{ student.email }}</td>
            </tr>
        </tbody>
    </table>
</template>

<script>
    import MixinCommon from '@/mixins/common.js'

    export default {
        data() {
            return {
                searchTerm: '',
                Students: [],
                studentcount: 0
            }
        },
        created() {
            this.Students = this.getSutdentList()
        },
        computed: {
            recordCount() {
                return this.Students.length
            }
        },
        mixins: [MixinCommon],
        methods: {
            filteredStudents() {
                return this.searchStudentList(this.searchTerm.toUpperCase(), this.Students)
            },
        }
    }
</script>

CodePudding user response：

I don't know the implementation of the searchStudentsList method, but you could try using the filteredStudents as a computed property, or making a watch property on the searchTerm in order to make the search again:

Using computed:

<template>
        <div >
          Total record(s): {{ recordCount }}
        </div>

    <table >
        <thead >
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="student in filteredStudents" :key="student._id">
                <td>{{ student.firstName }}</td>
                <td>{{ student.lastName }}</td>
                <td>{{ student.email }}</td>
            </tr>
        </tbody>
    </table>
</template>

<script>
    import MixinCommon from '@/mixins/common.js'

    export default {
        data() {
            return {
                searchTerm: '',
                Students: [],
                studentcount: 0
            }
        },
        created() {
            this.Students = this.getSutdentList()
        },
        computed: {
            recordCount() {
                return this.Students.length
            },
            filteredStudents() {
                return this.searchStudentList(this.searchTerm.toUpperCase(), this.Students)
            },
        },
        mixins: [MixinCommon],
    }
</script>

Using watch property:

<template>
        <div >
          Total record(s): {{ recordCount }}
        </div>

    <table >
        <thead >
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="student in filteredStudents" :key="student._id">
                <td>{{ student.firstName }}</td>
                <td>{{ student.lastName }}</td>
                <td>{{ student.email }}</td>
            </tr>
        </tbody>
    </table>
</template>

<script>
    import MixinCommon from '@/mixins/common.js'

    export default {
        data() {
            return {
                searchTerm: '',
                Students: [],
                filteredStudents: [],
                studentcount: 0
            }
        },
        created() {
            this.Students = this.getSutdentList()
            this.filteredStudents = this.searchStudentList(this.searchTerm.toUpperCase(), this.Students)
        },
        computed: {
            recordCount() {
                return this.Students.length
            }
        },
        watch: {
          searchTerm(newValue) {
            this.filteredStudents = this.searchStudentList(newValue.toUpperCase(), this.Students)
          }
        }
        mixins: [MixinCommon],
    }
</script>