วิธีปิดการใช้งานอินพุตแบบมีเงื่อนไขใน 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'

ดังนั้นหากค่าสำหรับ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'pre-pend ค่าที่คุณกำลังตรวจสอบด้วย+เช่น<input :disabled="!!+validated"/>นี้จะเปลี่ยนสตริงของตัวเลขเป็นจำนวนเช่น

+1 = 1 +'1' = 1 เช่นเดียวกับเดวิดมอร์โรว์กล่าวไว้ข้างต้นคุณสามารถใส่ตรรกะตามเงื่อนไขของคุณเป็นวิธีการ - ซึ่งจะช่วยให้คุณอ่านรหัสได้มากขึ้น- เพียงแค่กลับออกจากวิธีการตามเงื่อนไขที่คุณต้องการตรวจสอบ

คุณสามารถจัดการ:disabledแอตทริบิวต์ในvue.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) เตือนความจำ: แอตทริบิวต์ "disabled" ของอินพุตนั้นไม่ใช่แอตทริบิวต์Boolean
การมีอยู่ของแอตทริบิวต์หมายความว่าอินพุตถูกปิดใช้งาน

อย่างไรก็ตามผู้สร้าง Vue.js ได้เตรียมสิ่งนี้ ... https://vuejs.org/v2/guide/syntax.html#Attributes

(ขอบคุณ @connexo สำหรับสิ่งนี้ ... จะเพิ่มแอททริบิวต์ที่ปิดการใช้งานในข้อความอินพุตใน vuejs ได้อย่างไร )

(2)นอกจากนี้ยังมีปัญหาเรื่องการเรนเดอร์เวลา DOM อีกครั้งที่ฉันมี DOM ไม่ได้อัปเดตเมื่อฉันพยายามสลับกลับ

ในบางสถานการณ์ "ส่วนประกอบจะไม่แสดงผลใหม่ทันทีโดยจะอัปเดตใน 'ขีด' ถัดไป"

จาก Vue.js docs: 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 ชุด / แผนที่ไม่ปรากฏเป็นปฏิกิริยาเท่าที่ฉันสามารถบอกได้ในขณะที่เขียน