個人覺得這個應該用v-model來解決。
報錯的原因 是因為在computed解析的時候$refs還沒有被創(chuàng)建。$refs是在組件渲染完成之后才填充的 computed解析是在created之前解析的。
也是正在研究vue，如果有錯誤 還希望指正
官網(wǎng)的$refs https://cn.vuejs.org/v2/api/#ref

官方

$refs 只在組件渲染完成后才填充，并且它是非響應式的。它僅僅是一個直接操作子組件的應急方案——應當避免在模板或計算屬性中使用 $refs。

直接用v-model不就行啦

//HTML
<input v-model="test" v-bind:class="{testClass:flag}"/>
//js
data: function() {
    return {
        test:"",
    }
},
computed:{
    flag(){
        return this.test?true:false;
    }
}

<input v-model.trim="username"/>
class="{xxx: username.length>0}"

你別用name試試，是不是這個key不能用。