Как условно отключить ввод в 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'предварительно ожидайте значение, которое вы проверяете, +например, <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» входных данных НЕ является логическим атрибутом.
Простое присутствие атрибута означает, что ввод отключен.

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