У меня есть вход:
<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 : ''">
источник
true
или вfalse
зависимости от значения элемента в вашей БДу вас может быть вычисленное свойство, которое возвращает логическое значение, зависящее от любых необходимых вам критериев.
затем поместите вашу логику в вычисляемое свойство ...
источник
isDisabled()
пределах HTML, определенного вData
.Не сложно, проверь это.
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 .Он примет логическое значение, если это правда , то вход отключается, в противном случае он будет включен ...
Что-то вроде структурированного, как показано ниже в вашем случае, например:
Также прочитайте это ниже:
источник
Вы можете создать вычисляемое свойство и включить / отключить любой тип формы в соответствии с его значением.
источник
Попробуй это
Vue JS
источник
Переключить атрибут отключения ввода был удивительно сложным. Вопрос для меня был двойным:
(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.
Решение было использовать:
Более полный пример рабочего процесса:
источник
Можно использовать это условие добавления.
источник
Имейте в виду, что наборы / карты ES6, насколько я могу судить, не кажутся реактивными на момент написания статьи.
источник