我有一个输入:

<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;
},
..

验证是一个布尔值,它可以是0或1,但无论数据库中存储的是什么值,我的输入总是禁用的。

我需要输入被禁用,如果为假,否则它应该是启用和可编辑的。

更新:

这样做总是启用输入(无论我在数据库中有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 : ''"
/>

当前回答

请记住,ES6集/地图似乎没有反应,据我所知,在写作的时候。

其他回答

若要移除禁用道具,应将其值设置为false。这需要是false的布尔值,而不是字符串'false'。

因此,如果已验证的值是1或0,则根据该值有条件地设置禁用道具。例如:

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

这里有一个例子。

var app = new Vue({ 埃尔:“#应用”, 数据:{ 禁用:0 } }); < script src = " https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js " > < /脚本> < div id = "应用" > <button @click="disabled = (disabled + 1) % 2">Toggle Enable</button> . </button @click="disabled = (disabled + 1) % 2 <input type="text":disabled="disabled == 1"> <pre>{{$data}}</pre> . {{$data} < / div >

不难,看看这个。

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

斯菲德尔

您可以创建一个计算属性,并根据其值启用/禁用任何表单类型。

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

请记住,ES6集/地图似乎没有反应,据我所知,在写作的时候。

我的解决方案:

// App.vue模板:

<button
            type="submit"
            class="disabled:opacity-50 w-full px-3 py-4 text-white bg-indigo-500 rounded-md focus:bg-indigo-600 focus:outline-none"
            :disabled="isButtonDisabled()"
            @click="sendIdentity()"
          >
            <span v-if="MYVARIABLE > 0"> Add {{ MYVARIABLE }}</span>
            <span v-else-if="MYVARIABLE == 0">Alternative text if you like</span>
            <span v-else>Alternative text if you like</span>
          </button>

风格基于顺风

// App.vue脚本:

 (...)
  methods: {
   isButtonDisabled(){
    return this.MYVARIABLE >= 0 ? undefined: 'disabled';
   }
 }

手册: vue v2 vue v3

如果isButtonDisabled的值为null、undefined或false,则 Disabled属性甚至不会被包含在被呈现的对象中 元素。