입력이 있습니다.
<input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? '' : disabled">내 Vue.js 구성 요소에는 다음이 있습니다.
..
..
ready() {
this.form.name = this.store.name;
this.form.validated = this.store.validated;
},
..
validateda 또는 a boolean일 수 있지만 데이터베이스에 저장된 값에 관계없이 입력은 항상 비활성화됩니다.01
인 경우 입력을 비활성화해야합니다 false. 그렇지 않으면 활성화하고 편집 할 수 있어야합니다.
최신 정보:
이렇게하면 항상 입력 이 가능 합니다 (데이터베이스에 0 또는 1이 있더라도) :
<input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? '' : disabled">이렇게하면 항상 입력 이 비활성화됩니다 (데이터베이스에 0 또는 1이 있더라도) :
<input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? disabled : ''">답변
비활성화 된 소품을 제거하려면 해당 값을로 설정해야합니다 false. false문자열이 아닌에 대한 부울 값이어야 합니다 'false'.
따라서의 값 validated이 1 또는 0이면 조건부로 disabled해당 값을 기준으로 소품을 설정하십시오 . 예 :
<input type="text" :disabled="validated == 1">다음은 예입니다.
var app = new Vue({
el: '#app',
data: {
disabled: 0,
},
}); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button @click="disabled = (disabled + 1) % 2">Toggle Enable</button>
<input type="text" :disabled="disabled == 1">
<pre>{{ $data }}</pre>
</div>답변
필요한 기준에 따라 부울을 반환하는 계산 된 속성을 가질 수 있습니다.
<input type="text" :disabled=isDisabled>그런 다음 논리를 계산 된 속성에 넣습니다.
computed: {
isDisabled() {
// evaluate whatever you need to determine disabled here...
return this.form.validated;
}
}답변
어렵지 않게 이것을 확인하십시오.
<button @click="disabled = !disabled">Toggle Enable</button>
<input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="disabled">답변
비활성화 된 속성에는 부울 값이 필요합니다.
<input :disabled="validated" />
난 경우에만 확인 한 방법 공지 사항 validated이이 같은 일을한다 – 0 is falsey… 예를 들어,
0 is considered to be false in JS (like undefined or null)
1 is in fact considered to be true
추가주의를 기울이려면 :
<input :disabled="!!validated" />
이 이중 부정은 회전 falsey또는 truthy값 0또는 1에 false또는true
나를 믿지 않습니까? 콘솔로 이동하여 입력 !!0하거나 !!1🙂
또한 숫자를 확인 1하거나 0문자열이 아닌 숫자로 확실하게 전달되도록 '1'하거나 예를 들어 '0'확인하고있는 값을 미리 추가 하면 숫자 문자열이 숫자로 바뀝니다.+<input :disabled="!!+validated"/>
+1 = 1
+'1' = 1
David Morrow가 위에서 말했듯이 조건부 논리를 메소드에 넣을 수 있습니다. 더 읽기 쉬운 코드를 제공합니다 . 확인하려는 조건을 메소드에서 반환하십시오.
답변
vue.js:disabled 에서 속성을 조작 할 수 있습니다 .
부울을 수락하고 true이면 입력이 비활성화되고 그렇지 않으면 활성화됩니다.
예를 들어 다음과 같이 구조화 된 것 :
<input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? false : true">아래 내용도 읽어보십시오.
JavaScript 표현식을 통해 조건부로 입력 요소 비활성화
JavaScript 표현식으로 인라인 입력 요소를 조건부로 비활성화 할 수 있습니다. 이 간단한 접근 방식은 간단한 조건부 논리를 신속하게 적용 할 수있는 방법을 제공합니다. 예를 들어, 비밀번호 길이 만 확인해야하는 경우 이와 같은 작업을 고려할 수 있습니다.
<h3>Change Your Password</h3>
<div class="form-group">
<label for="newPassword">Please choose a new password</label>
<input type="password" class="form-control" id="newPassword" placeholder="Password" v-model="newPassword">
</div>
<div class="form-group">
<label for="confirmPassword">Please confirm your new password</label>
<input type="password" class="form-control" id="confirmPassword" placeholder="Password" v-model="confirmPassword" v-bind:disabled="newPassword.length === 0 ? true : false">
</div>답변
계산 된 속성을 만들고 값에 따라 모든 폼 유형을 활성화 / 비활성화 할 수 있습니다.
<template>
<button class="btn btn-default" :disabled="clickable">Click me</button>
</template>
<script>
export default{
computed: {
clickable() {
// if something
return true;
}
}
}
</script>답변
이 시도
<div id="app">
<p>
<label for='terms'>
<input id='terms' type='checkbox' v-model='terms' /> Click me to enable
</label>
</p>
<input :disabled='isDisabled'></input>
</div>부스 js
new Vue({
el: '#app',
data: {
terms: false
},
computed: {
isDisabled: function(){
return !this.terms;
}
}
})