vue computed

Question

我这里让input框的有值时，给button添加一个class ,但是报错了

Answer 1

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

你别用name试试，是不是这个key不能用。

Answer 2

个人觉得这个应该用v-model来解决。
报错的原因 是因为在computed解析的时候$refs还没有被创建。$refs是在组件渲染完成之后才填充的 computed解析是在created之前解析的。
也是正在研究vue，如果有错误 还希望指正
官网的$refs https://cn.vuejs.org/v2/api/#ref

Answer 3

官方

$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;
    }
}