代码如下，预期功能是输入为空的情况下提交按钮无法点击，使用计算属性返回布尔变量进行控制，但是实际使用时有值的情况下也无法点击，是哪里出了问题呢

源自：-

代码如下，预期功能是输入为空的情况下提交按钮无法点击，使用计算属性返回布尔变量进行控制，但是实际使用时有值的情况下也无法点击，是哪里出了问题呢

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>todolist</title>
    <script src="vue.js"></script>
</head>

<body>
<div id="root">
     <div>
     <input v-model="inputValue"/>
     <button disabled="loginId" v-on:click="handleClick">Enter</button>
   </div>
     <ul>
     <li v-for="(item,index) of list":key="index">
     {{item}}
     </li>
     </ul>
</div>

<script>
    new Vue({
        el: '#root',
        data:{
        inputValue:'',
        list:[]
        },
        methods:{
        handleClick:function(){
        this.list.push(this.inputValue)
        inputValue=''
        }
        },
       computed: {
        isLogin() {
        return !!inputValue
    }
}
    })
</script>
</body>
</html>

提问者：云爆雷声 2018-05-13 13:40

个回答

星空下的仓颉

2018-05-14 14:33:11

已采纳

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>todolist</title>
<script src="vue.js"></script>
</head>

<body>
<div id="root">
<div>
<input v-model="inputValue"/>
<button :disabled="!inputValue" v-on:click="handleClick">Enter</button>
</div>
<ul>
<li v-for="(item,index) of list" :key="index">
{{item}}
</li>
</ul>
</div>

<script>
new Vue({
el: '#root',
data:{
inputValue:'',
list:[]
},
methods:{
handleClick:function(){
this.list.push(this.inputValue)
inputValue=''
}
}
});
</script>
</body>
</html>

0

星空下的仓颉: 2018-05-14 14:32:09

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>todolist</title>    <script src="vue.js"></script></head><body><div id="root">     <div>	     <input v-model="inputValue"/>	     <button :disabled="!inputValue" v-on:click="handleClick">Enter</button>     </div>     <ul>     <li v-for="(item,index) of list" :key="index">     {{item}}     </li>     </ul></div><script>    new Vue({        el: '#root',        data:{	        inputValue:'',	        list:[]        },        methods:{	        handleClick:function(){		        this.list.push(this.inputValue)		        inputValue=''	        }        }    });</script></body></html>

没用computed,这样就可以了.