我想要的是使用空值禁用输入。就像如果LEVEL2输入为空,则LEVEL3和LEVEL4应该被禁用并且具有空值。如果LEVEL 3输入为空,则应禁用LEVEL4并且其值为空。禁用的代码正在运行,但是值仍然存在。我已经有这样的东西:
<el-form-item :prop="'materialInfo.' + e_key + '.LEVEL2'" :rules="level2Rules" class="u_f_left">
<span>-</span>
<el-input v-model="e_val.LEVEL2" :value="e_val.LEVEL2" placeholder="階層2" class="wid70" @blur="joinLevel(e_key)" clearable></el-input>
</el-form-item>
<el-form-item :prop="'materialInfo.' + e_key + '.LEVEL3'" :rules="level3Rules" class="u_f_left">
<span>-</span>
<el-input :disabled="e_val.LEVEL2?false:true" v-model="e_val.LEVEL3" :value="e_val.LEVEL3" placeholder="階層3" class="wid70" @blur="joinLevel(e_key)" clearable></el-input>
</el-form-item>
<el-form-item :prop="'materialInfo.' + e_key + '.LEVEL4'" :rules="level4Rules" class="u_f_left">
<span>-</span>
<el-input :disabled="e_val.LEVEL3?false:true" v-model="e_val.LEVEL4" :value="e_val.LEVEL4" placeholder="階層4" class="wid70" @blur="joinLevel(e_key)" clearable></el-input>
</el-form-item>
我删除了LEVEL2的值,因此LEVEL3被禁用。但是启用了[[LEVEL4,因为LEVEL3中仍然有值。
因此,如果删除了LEVEL2的值,我该怎么做才能删除LEVEL3,4,5
的值。如果LEVEL3为空,则删除LEVEL4,5。如果LEVEL4为空,则删除LEVEL5。我尝试像这样在v-model
中放置条件:<el-input :disabled="e_val.LEVEL2?false:true" v-model="e_val.LEVEL2?e_val.LEVEL3:EMPTYVALUE" :value="e_val.LEVEL3" placeholder="階層3" class="wid70" @blur="joinLevel(e_key)" clearable></el-input>
[EMPTYVALUE
被声明为EMPTYVALUE: '',
。但是似乎我遇到一些错误,无法编译。而且如果可能的话,我也想避免使用
blur
或change events
。
new Vue({
el: "#app",
data() {
return {
boxes: new Array(5),
}
},
computed: {
lastBox() {
let lastBox = 0;
for (let i = 0; i < this.boxes.length; i++) {
if (this.boxes[i] && this.boxes[i].length && i == lastBox) {
lastBox++;
} else {
this.boxes[i] = '';
}
}
return lastBox;
}
}
});
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
input[type=text] {
width: 50px;
height: 30px;
font-size: 16px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input type="text" v-for="(item, index) in boxes" :key="index"
v-model="boxes[index]" :disabled="index > lastBox" />
</div>