Question

如何根据Vue数据使输入字段只读？

例如：

<select class="form-control" 
        id="selectCategory" 
        :disabled="cat_id >= 
            1" 
        name="cat_id">

我想让字段只读但不禁用。我怎样才能做到这一点？

Answer 1

请注意，根据HTML规范，HTML中的select标记没有readonly属性。

但是，一般情况下，我会选择以下内容：

<input class="form-control" id="selectCategory" :readonly="cat_id >= 1">

基本上，文档说如果属性值的计算结果为false，则省略该属性。有关详细信息，请参阅here。

Answer 2

您可以这样做：

<input v-bind:readonly="isReadOnly">

Answer 3

我在制作用于更改密码的表格时遇到了这个问题，并且遇到浏览器试图自动完成所有操作。这样可以防止自动填充功能触发，并提供一种更改值以适合您的需求的方法。
由于某种原因，添加v-bind：readonly属性为true会还原为readonly =“ readonly”
这是我当前正在使用的示例，该示例在focusout上删除并重新添加了readonly属性。

Vue模板HTML

<input type="password" v-model="user.password" placeholder="Password" @focusin="toggleReadonly" @focusout="toggleReadonly" :readonly="true">

方法

toggleReadonly(event){
          event.preventDefault()
          if(event.target.getAttribute('readonly') == 'readonly'){
              event.target.removeAttribute('readonly')
          }
          else{
              event.target.setAttribute('readonly', 'readonly')
         }
 }

Answer 4

你可以有一个计算属性，它返回一个布尔值，取决于你需要的任何标准。

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

然后将您的逻辑放在计算属性中......

computed: {
 isDisabled() {
// evaluate whatever you need to determine disabled here...
   return true;
 }
}

的jsfiddle https://jsfiddle.net/sureshamk/0dzvcf4d/1320/

如何根据Vue中的特定值使输入只读？

4 个答案: