vue.js에서 조건부로 입력을 비활성화하는 방법

입력이 있습니다.

<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">

jsfiddle

비활성화 된 속성에는 부울 값이 필요합니다.

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

입력의 disabled 속성 을 토글하는 것은 놀랍도록 복잡했습니다. 나를위한 문제는 두 가지였다.

(1) 기억하십시오 : 입력의 "disabled"속성은 불리언 속성 이 아닙니다 .
단순한 존재 속성 수단의 입력을 사용할 수있다.

그러나 Vue.js 제작자는 이것을 준비했습니다 ... https://vuejs.org/v2/guide/syntax.html#Attributes

(@connexo에게 감사드립니다 ... vuejs의 입력 텍스트에 비활성화 된 속성을 추가하는 방법은 무엇입니까? )

(2) 또한 DOM 타이밍 재 렌더링 문제가있었습니다. 다시 전환하려고 할 때 DOM이 업데이트되지 않았습니다.

특정 상황에서 "구성 요소가 즉시 다시 렌더링되지 않습니다. 다음 '틱'에서 업데이트됩니다."

Vue.js 문서에서 : https://vuejs.org/v2/guide/reactivity.html

해결책은 다음을 사용하는 것입니다.

this.$nextTick(()=>{
    this.disableInputBool = true
})

전체 예제 워크 플로우 :

<div @click="allowInputOverwrite">
    <input
        type="text"
        :disabled="disableInputBool">
</div>

<button @click="disallowInputOverwrite">
    press me (do stuff in method, then disable input bool again)
</button>

<script>

export default {
  data() {
    return {
      disableInputBool: true
    }
  },
  methods: {
    allowInputOverwrite(){
      this.disableInputBool = false
    },
    disallowInputOverwrite(){
      // accomplish other stuff here.
      this.$nextTick(()=>{
        this.disableInputBool = true
      })
    }
  }

}
</script>

이 추가 조건을 사용할 수 있습니다.

  <el-form-item :label="Amount ($)" style="width:100%"  >
            <template slot-scope="scoped">
            <el-input-number v-model="listQuery.refAmount" :disabled="(rowData.status !== 1 ) === true" ></el-input-number>
            </template>
          </el-form-item>

ES6 세트 / 맵은 글을 쓸 때 내가 알 수있는 한 반응하지 않는 것 같습니다.