Vue.js এ কীভাবে শর্তসাপেক্ষে ইনপুট অক্ষম করবেন

Question

আমার একটি ইনপুট রয়েছে:

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

Answer 1

অক্ষম প্রাপ অপসারণ করতে আপনার মানটি সেট করতে হবে 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>

Comments

আমার ডিবিতে, আমি 0 এবং 1 টি সত্য এবং মিথ্যা জন্য সঞ্চিত করেছি, আপনার ফ্রিডলের সাথে খেলছি, 0 এবং 1 এটিকে অক্ষম রাখে

— জাফফার সাফি

আমার ডিবি কাঠামোটি একে একে সত্য এবং মিথ্যা হিসাবে সম্পাদনা করতে হবে?

— জাফফার সাফি

না, কেবল আপনার ডিবিতে আইটেমের মানের উপর নির্ভর করে trueবা এর falseউপর নির্ভর করে মান নির্ধারণ করুন

— আসেমাহলে

ঠিক করুন:: অক্ষম = "যাচাই" যতক্ষণ যাচাই করা সত্য / মিথ্যা বা 0/1, জাভাস্ক্রিপ্ট জানতে পারবে।

— দেশ্পারতায়েব

@ জি কে জিএসফিডেলে যে কোডটি ছিল তা এখনই উত্তরে রয়েছে

— আসেমাহলে

Answer 2

আপনার কাছে এমন একটি গণনা করা সম্পত্তি থাকতে পারে যা আপনার প্রয়োজনীয় মানদণ্ডের উপর নির্ভর করে একটি বুলিয়ানকে প্রদান করে।

<input type="text" :disabled=isDisabled>

তারপরে একটি যুক্ত গণনায় আপনার যুক্তি রাখুন ...

computed: {
  isDisabled() {
    // evaluate whatever you need to determine disabled here...
    return this.form.validated;
  }
}

Comments

এটি আমার পক্ষে কাজ করেছে, কোনও কোটের প্রয়োজন নেই, আমার ক্ষেত্রে isDisabled()এইচটিএমএল-র মধ্যে কল করা হয়েছে, এটিকে সংজ্ঞায়িত করা হয়েছে Data।

— লিও

আমি অবশ্যই এটি খুব সুন্দরভাবে পছন্দ করেছি

— ছায়া প্রতিধ্বনি 419

কেন কোন উদ্ধৃতি প্রয়োজন?

— ফার্কে

Answer 3

কঠিন নয়, এটি পরীক্ষা করে দেখুন।

<button @click="disabled = !disabled">Toggle Enable</button>
<input type="text" id="name" class="form-control" name="name"  v-model="form.name" :disabled="disabled">

jsfiddle

Comments

আপনার উপাদানটি ডেটা অ্যাটর্সযুক্ত অক্ষমযুক্ত: ভুয়া বা বুলিয়ান টাইপ প্রয়োজন।

— সেবাস্তেও মার্কোস

Answer 4

আপনার অক্ষম বৈশিষ্ট্যের জন্য একটি বুলিয়ান মান প্রয়োজন:

<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'প্রাক-Pend মান আপনি যদি একটি সঙ্গে যাচাই করছি +যেমন <input :disabled="!!+validated"/>একটি নম্বর যেমন একটি সংখ্যাকে একটি স্ট্রিং এই পালাক্রমে

+1 = 1 +'1' = 1 ডেভিড মোড়ো যেমন উপরে বলেছিল আপনি কোনও শর্তে আপনার শর্তযুক্ত যুক্তি রাখতে পারেন - এটি আপনাকে আরও পঠনযোগ্য কোড দেয় - আপনি যে শর্তটি পরীক্ষা করতে চান তা কেবল পদ্ধতিটি থেকে ফিরে আসুন ।

Answer 5

আপনি vue.js এ:disabled বৈশিষ্ট্য হেরফের করতে পারেন ।

এটি কোনও বুলিয়ান গ্রহণ করবে, যদি এটি সত্য হয় তবে ইনপুট অক্ষম হয়ে যায়, অন্যথায় এটি সক্ষম করা হবে ...

নীচে যেমন কাঠামোর মতো কিছু আপনার ক্ষেত্রে উদাহরণস্বরূপ:

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

এটি নীচে পড়ুন:

শর্তাধীনভাবে জাভাস্ক্রিপ্ট এক্সপ্রেশনের মাধ্যমে ইনপুট উপাদানগুলিকে অক্ষম করা হচ্ছে

আপনি শর্তাধীনভাবে জাভাস্ক্রিপ্ট এক্সপ্রেশন দিয়ে ইনপুট উপাদানগুলিকে ইনলাইন অক্ষম করতে পারেন। এই কমপ্যাক্ট পদ্ধতির সহজ শর্তসাপেক্ষ যুক্তি প্রয়োগ করার একটি দ্রুত উপায় সরবরাহ করে। উদাহরণস্বরূপ, আপনার যদি কেবল পাসওয়ার্ডের দৈর্ঘ্য পরীক্ষা করতে হয় তবে আপনি এটির মতো কিছু করার কথা ভাবতে পারেন।

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

Answer 6

আপনি একটি গণিত সম্পত্তি করতে পারেন এবং এর মান অনুযায়ী যে কোনও ফর্ম প্রকারকে সক্ষম / অক্ষম করতে পারেন।

<template>
    <button class="btn btn-default" :disabled="clickable">Click me</button>
</template>
<script>
     export default{
          computed: {
              clickable() {
                  // if something
                  return true;
              }
          }
     }
</script>

Comments

আমার মতে এটি কারও ব্যবহারের ক্ষেত্রে পড়ার এবং প্রয়োগ করার সহজ উত্তর।

— জর্জিও টেম্পেস্তা

এটিই আমার জন্য কাজ করেছিল। পদ্ধতির পরিবর্তে গণনাতে পদ্ধতিটি সরাতে। ধন্যবাদ!

— জোকব

Answer 7

এটা চেষ্টা কর

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

Answer 8

ইনপুটটির অক্ষম বৈশিষ্ট্যটি টগল করা অবাক করা জটিল। আমার জন্য বিষয়টি দ্বিগুণ ছিল:

(1) মনে রাখবেন: ইনপুটটির "অক্ষম" বৈশিষ্ট্যটি কোনও বুলিয়ান বৈশিষ্ট্য নয়।
গুণটির নিছক উপস্থিতির অর্থ ইনপুট অক্ষম করা আছে।

যাইহোক, ভ্যু.জেএস নির্মাতারা এটি প্রস্তুত করেছেন ... https://vuejs.org/v2/guide/syntax.html####

(এর জন্য @ কনেক্সেক্সকে ধন্যবাদ ... ভ্যুজে ইনপুট পাঠ্যে অক্ষম বৈশিষ্ট্য কীভাবে যুক্ত করবেন? )

(২) তদ্ব্যতীত, একটি ডিওএম টাইমিং পুনরায় রেন্ডারিংয়ের সমস্যা ছিল যা আমার ছিল। আমি আবার টগল করার চেষ্টা করার সময় ডিওএম আপডেট হচ্ছিল না।

কিছু নির্দিষ্ট পরিস্থিতিতে, "উপাদানটি অবিলম্বে পুনরায় রেন্ডার করবে না It এটি পরবর্তী 'টিক'-এ আপডেট হবে" "

ভ্যু.জেএস ডক্স থেকে: 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>

Comments

++ (তবে, ভ্যু.জেস এর নির্মাতারা এটি প্রস্তুত করেছেন ... vuejs.org/v2/guide/syntax.html#Atributes )

— রাইটিস ডেরেস্কেভিচিয়াস

Answer 9

এই যুক্ত শর্তটি ব্যবহার করতে পারেন।

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

Answer 10

মনে রাখবেন যে ES6 সেট / মানচিত্র লেখার সময় যতটা আমি বলতে পারি ততক্ষণ প্রতিক্রিয়াশীল বলে মনে হয় না।