我有一个输入:

<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集/地图似乎没有反应,据我所知,在写作的时候。

其他回答

你可以在vue.js中操作:disabled属性。

它将接受一个布尔值,如果它为真,则输入被禁用,否则将启用…

以你的例子为例,结构如下:

<input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? false : true">

同时阅读下面这篇文章:

通过JavaScript有条件地禁用输入元素 你可以有条件地inline禁用输入元素 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>

当我们想要禁用输入时,通过将禁用道具设置为条件,我们可以在Vue 3中有条件地禁用输入

例如,我们可以这样写:

<template>
  <input :disabled="disabled" />
  <button @click="disabled = !disabled">toggle disable</button>
</template>


<script>
export default {
  name: "App",
  data() {
    return {
      disabled: false,
    };
  },
};
</script>

若要移除禁用道具,应将其值设置为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 >

如果你使用SFC,并想要一个最小的例子,这将是你如何使用它:

导出默认值{ 数据(){ 返回{ disableInput:假 } }, 方法:{ toggleInput () { 这一点。this.disableInput = } } } <模板> < div > <input type="text":disabled="disableInput"> <button @click="toggleInput">切换输入</button> < / div > < /模板>

单击该按钮会触发toggleInput函数,并简单地用它来切换disableInput的状态。this.disableInput = !

可以使用此添加条件。

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