极客观点
项目管理
HarmonyOS
问题描述
实现目标：表单项2选1，切换禁用，同时将禁用的表单项的规则去掉。
方法：通过计算属性绑定动态prop。
在线demo：http://js.jirengu.com/juheyuz...
问题出现的环境背景及自己尝试过哪些方法
vue+element。
根据单选框选中的值切换 prop值 为 规则rules里的字段（增加）或者 空字符串（去除）。
相关代码
// 请把代码文本粘贴到下方（请勿用图片代替代码）
<!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('#app')
</script>
</body>
</html>
你期待的结果是什么？实际看到的错误信息又是什么？
已经通过别的方式解决，也发现了这个问题所在是因为 prop的传入初始值必须是非空字符串（就算是rules里面没有定义的都行）。所以真正的问题是不明白为什么 初始prop不能为空字符串。