Як умовно відключити введення в 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Будучи a 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'попереднє значення, яке ви перевіряєте, +наприклад, <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) Пам'ятайте: атрибут "вимкнено" вводу НЕ булевий атрибут.
Сама наявність атрибута означає, що введення вимкнено.

Однак творці 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 не здаються реактивними, наскільки я можу сказати, під час написання.