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

Question

需要实现这么一个功能：
点击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；

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

Answer 1

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
          }
        }
      }
    },