vue 组合 api 未按预期工作

Question

refFirstname 似乎有问题。也许这是一个错字问题，但我已经检查了几次。输入 refFirstName 未按预期工作。
<h2> Composition Fullname is {{ refFullName }} </h2> 应显示全名。现在它只显示姓氏。

在 Computed1.vue 中：

<template>
    <div>
        <input type="text" placeholder="First Name" v-model = "fName" />
        <input type="text" placeholder="Last Name" v-model = "lName" />
        <h2> Options Fullname is {{ fullName }} </h2>
        <hr>
        <input type="text" placeholder="First Name" v-model = "refFirstName" />
        
        <input type="text" placeholder= "Last Name" v-model = "refLastname" />

        <h2> Composition Fullname is {{ refFullName }} </h2>

    </div>
</template>

<script>
import { computed, ref,  } from 'vue'
export default {
        name:'Computed1',

        setup(){

            const refFirstname = ref(' ')
            const refLastname = ref(' ')

            const refFullName = computed(function(){
                return  ` ${refLastname.value} ||  ${refFirstname.value} `
            })

            return {refFirstname, refLastname, refFullName}
        },

        data(){
            return{
            fName: '',
            lName: '',
            }
        },

        computed:{
            fullName(){
                return `${this.fName} ${this.lName}`
            }
        },
    }

</script>

Answer 1

修正 refFirstName 的拼写错误，它应该是 refFirstname。抱歉，本可以评论，但我没有足够的声誉 atm。

<input type="text" placeholder="First Name" v-model = "refFirstname" />