为什么我的disabled控制台打印成功,但是赋值并没有赋给:disabled?

img


需要实现这么一个功能:
点击radio1,区间选择启用,点选择禁用;点radio2,区间选择禁用,点选择启用

                    <a-radio-group v-model="value" @change="handleDisabledChange" >
                      <a-row :gutter="24" class="screenRow">
                        <a-col :span="1" style="padding-bottom: 8px;">
                          <a-radio 
                            name="dtGroup"
                            :value="1" />
                        </a-col>
                        <a-col :span="23" style="padding-bottom: 8px;">
                          <a-form-item
                          label="时间区间选择">
                            <a-range-picker
                              format="YYYY-MM-DD"
                              :placeholder="['开始日期', '结束日期']"
                              ref='setDateRef'
                              @change='setDate'
                              :allowClear='false'
                              :disabled='!disabled' />
                          </a-form-item>
                        </a-col>
                      </a-row>
                      <a-row :gutter="24" class="screenRow">
                        <a-col :span="1">
                          <a-radio 
                            name="dtGroup"
                            :value="2" />
                        </a-col>
                        <a-col :span="13">
                          <a-form-item
                          label="时间点选择">
                            <a-date-picker
                              ref='pointDateRef'
                              @change="onChange"
                              :disabled='!disabled' />
                          </a-form-item>
                        </a-col>
                        <a-col :span="8" :style="{textAlign: 'right'}">
                          <a-button type="primary" @click='timeGetList(1)'>
                            查询
                          </a-button>
                        </a-col>
                      </a-row>
                    </a-radio-group>
     handleDisabledChange(e) {
      var i = e.target.value;
      for (var j = 1; j <= i; j++) {
        if (e.target.value == 1) {
          console.log('我是区间时间:'+j);
          if (e.target.value == 1) {
            console.log(this.$refs.setDateRef.disabled);
            this.$refs.setDateRef.disabled = !this.$refs.setDateRef.disabled;
            console.log(this.$refs.setDateRef.disabled);
          } else {
            this.$refs.pointDateRef.disabled = this.$refs.pointDateRef.disabled;
          }
        } else {
          console.log('我是点时间:'+j);
          if (e.target.value == 2) {
            this.$refs.pointDateRef.disabled = !this.$refs.pointDateRef.disabled;
          } else {
            this.$refs.setDateRef.disabled = this.$refs.setDateRef.disabled;
          }
        }
      }
    },

现在这样写导致控制台可以打印出结果,但是并没有将disabled的值赋给:disabled;

img

各位!该怎么解决,我第一次碰vue,可以说的详细点儿吗!谢谢了!

disabled 这个是个动态属性,你不要直接去操作 节点变更 disabled, 视图上面的disabled可以直接变更的

在data里面声明两个 setDateRefDisabled ,pointDateRefDisabled 各自绑定对应的 节点然后即可实现数据视图变更

handleDisabledChange(e) {
      var i = e.target.value;
      for (var j = 1; j <= i; j++) {
        if (e.target.value == 1) {
          console.log('我是区间时间:'+j);
          if (e.target.value == 1) {
       
            this.setDateRefDisabled = !this.setDateRefDisabled
      
          } else {
            this.pointDateRefDisabled = !this.this.pointDateRefDisabled

          }
        } else {
          console.log('我是点时间:'+j);
          if (e.target.value == 2) {
            this.pointDateRefDisabled = !this.this.pointDateRefDisabled
          } else {
            this.setDateRefDisabled = !this.setDateRefDisabled
          }
        }
      }
    },