조건부로 입력 비활성화(Vue.js)

조건부로 입력 비활성화(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;
},
..

validated한 사람으로서boolean, 그것은 둘 중 하나일 수 있다.0또는1그러나 어떤 값이 데이터베이스에 저장되든 내 입력은 항상 비활성화되어 있다.

다음과 같은 경우 입력을 비활성화해야 한다.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'.

그래서, 만약 그 값이validated1 또는 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가 말했듯이, 당신은 당신의 조건부 논리를 어떤 방법에 넣을 수 있다 - 이것은 당신에게 더 읽기 쉬운 코드를 준다 - 단지 당신이 확인하고 싶은 조건으로부터 되돌아올 수 있다.

당신은 조작할 수 있다.:disabledvue.js에 속하다.

부울이 허용되고, 부울이 참이면 입력이 비활성화되며, 그렇지 않으면 부울이 활성화된다...

예를 들어 다음과 같이 구조화된 경우:

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

vue js.

new Vue({
  el: '#app',
  data: {
    terms: false
  },
  computed: {
    isDisabled: function(){
        return !this.terms;
    }
  }
})

입력의 비활성화된 속성을 전환하는 것은 놀랄 만큼 복잡했다.그 문제는 두 가지였다.

(1) 기억하라: 입력의 "사용 불가능" 속성은 부울 속성이 아니다.
속성의 존재만으로도 입력이 비활성화됨을 의미한다.

하지만, 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>

이것 또한 효과가 있을 것이다.

<input type="text" id="name" class="form-control" name="name"  v-model="form.name" :disabled="!validated">

SFC를 사용하고 이 사례에 대한 최소한의 예를 원하는 경우 다음과 같이 SFC를 사용할 수 있는 방법은 다음과 같다.

export default {
  data() {
return {
  disableInput: false
}
  },
  methods: {
toggleInput() {
  this.disableInput = !this.disableInput
}
  }
}

<template>
  <div>
<input type="text" :disabled="disableInput">
<button @click="toggleInput">Toggle Input</button>
  </div>
</template>

클릭button을 유발하다toggleInput기능하고 간단히 의 상태를 전환하다disableInput와 함께this.disableInput = !this.disableInput.

ES6 Set/Maps는 내가 말할 수 있는 한, 쓸 때 반응하는 것처럼 보이지 않는다는 것을 명심하라.

내 솔루션:

// App.vue 템플릿:

<button
            type="submit"
            class="disabled:opacity-50 w-full px-3 py-4 text-white bg-indigo-500 rounded-md focus:bg-indigo-600 focus:outline-none"
            :disabled="isButtonDisabled()"
            @click="sendIdentity()"
          >
            <span v-if="MYVARIABLE > 0"> Add {{ MYVARIABLE }}</span>
            <span v-else-if="MYVARIABLE == 0">Alternative text if you like</span>
            <span v-else>Alternative text if you like</span>
          </button>

테일윈드 기반 스타일

// App.vue 스크립트:

 (...)
  methods: {
   isButtonDisabled(){
    return this.MYVARIABLE >= 0 ? undefined: 'disabled';
   }
 }

설명서: vue v2 vue v3

isButtonDisabled의 값이 null, 정의되지 않음 또는 false인 경우, 비활성화된 속성은 렌더링된 요소에도 포함되지 않는다.

참조URL: https://stackoverflow.com/questions/38085180/disable-input-conditionally-vue-js