Ву.Яш отключить ввод условно

у меня есть вход

<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 : ''">
7 123
javascript forms html vue.js

7 ответов:

чтобы удалить отключенную опору, вы должны установить ее значение false. Это должно быть логическое значение false, а не строку 'false'.

так, если значение validated либо 1 или 0, то условно установить disabled опора на основе этого значения. Например:

<input type="text" :disabled="validated == 1">

вот пример.

230

у вас может быть вычисленное свойство, которое возвращает логическое значение, зависящее от любых необходимых вам критериев.

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

затем поместите свою логику в вычисляемое свойство...

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

Не сложно, проверьте это.

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

jsfiddle

15

ваш отключенный атрибут требует логического значения:

<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 Как сказал Дэвид Морроу выше, вы можете поместить свою условную логику в метод - это дает вам больше читабельный код-просто верните из метода состояние, которое вы хотите проверить.

6

вы можете манипулировать на 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>
2

вы можете создать вычисляемое свойство и включить/отключить любой тип формы в соответствии с его значением.

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

можно использовать это условие добавления.

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