problem description
achieve the goal: select 1 for form item 2, toggle off, and remove the rules for disabled form items.
method: bind dynamic prop by calculating properties.
online demo: http://js.jirengu.com/juheyuz.
the environmental background of the problems and what methods you have tried
vue+element.
switch the prop value to a field in the regular rules (increase) or an empty string (removed) based on the value selected in the radio box.
related codes
/ / Please paste the code text below (do not replace the code with pictures)
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="vue" />
<meta charset="utf-8">
<title>JS Bin</title>
<link rel="stylesheet" href="http://unpkg.com/element-ui@2.4.11/lib/theme-chalk/index.css">
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.4.11/lib/index.js"></script>
</head>
<body>
<div id="app">
<div @click="submit1" style="width:100px;cursor:pointer;"></div>
<el-form :model="form" label-width="100px" :rules="rules" ref="form">
<el-row>
<el-col :span="10">
<el-form-item label=":" :prop="itemIdchange">
<el-radio v-model="qiehuan" label="1" @change="ss"></el-radio>
<el-select v-model="form.itemId" placeholder="" :disabled="qiehuanJJ">
<el-option label="" value="00000000-0000-0000-0000-000000000001"></el-option>
<el-option label="" value="00000000-0000-0000-0000-000000000002"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label=":" :prop="itemIdchange1">
<el-radio v-model="qiehuan" label="2" @change="ss"></el-radio>
<el-select v-model="form.otherId" filterable placeholder="" :disabled="!qiehuanJJ">
<el-option label="1" value="1"></el-option>
<el-option label="2" value="2"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<script>
var Main = {
data() {
return {
rules: {
itemId: [
{ required: true, message: "", trigger: "change" },
],
otherId: [
{ required: true, message: "", trigger: "blur" },
],
},
qiehuanJJ:false,
form: {
itemId:"",
otherId:"",
},
qiehuan:"1",
};
},
computed: {
itemIdchange: function () {
return this.qiehuan == "1" ? "itemId" : "";
},
itemIdchange1: function () {
return this.qiehuan == "2" ? "otherId" : "";
}
},
watch: {
itemIdchange: function(a,b){
console.log(a,b,"prop -- ")
},
itemIdchange1: function(a,b){
console.log(a,b,"prop -- ")
},
qiehuan: function(a,b){
console.log(a,b," -- ")
}
},
methods: {
ss(){
this.$refs["form"].clearValidate();
if (this.qiehuan == "1") {
this.qiehuanJJ = false;
}else {
this.qiehuanJJ = true;
}
},
submit1(){
this.$refs["form"].validate((valid)=>{
if(valid){
console.log("success")
}else {
console.log("faild")
}
})
},
}
};
var Ctor = Vue.extend(Main)
new Ctor().$mount("-sharpapp")
</script>
</body>
</html>
what result do you expect? What is the error message actually seen?
has been resolved in other ways, and it has been found that the problem lies in that the incoming initial value of prop must be a non-empty string (even if it is not defined in rules). So the real problem is that I don"t understand why the initial prop can"t be an empty string.