vue composition api没有按预期工作答案

【问题标题】：vue composition api not working as intendedvue composition api没有按预期工作
【发布时间】：2021-07-27 02:54:41
【问题描述】：

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>

【问题讨论】：

标签： vuejs3

【解决方案1】：

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

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

【讨论】：