vue 가 계산 속성 을 변경 한 후 selection 선택 값 이 변경 되 지 않 는 문 제 를 해결 합 니 다.

2552 단어 vueselect선택 값
선행 코드:

//...
<body>
  <div id="qwe">
    <select v-model="selected">
      <option v-for="item in da" :value="item.value">{{item.value}}</option>
    </select>
    <span>{{selected}}</span>
  </div>
  <script>
    var dt = [{
      value: '111',
      label: 'aaa'
    }, {
      value: '222',
      label: 'bbb'
    }, {
      value: '333',
      label: 'ccc'
    }, {
      value: '444',
      label: 'ddd'
    }, {
      value: '555',
      label: 'fff'
    }];
    var vm = new Vue({
      el: '#qwe',
      data: {
        options: [{
          value: '  1',
          label: '   '
        }, {
          value: '  2',
          label: '   '
        }, {
          value: '  3',
          label: '   '
        }, {
          value: '  4',
          label: '   '
        }, {
          value: '  5',
          label: '    '
        }],
        selected: ''
      },
      computed: {
        da: function () {
          var _self = this;
          return _self.options.filter(function (item) {
            return +item.value.split('')[2] > 2;
          });
        }
      }
    })
  </script>
</body>
</html>
위의 코드 는 vue 의 v-for 명령 으로 데 이 터 를 연결 하여 option 을 만 드 는 것 입 니 다.그러나 오늘 글 을 배 울 때 갑자기 문 제 를 발 견 했 습 니 다.속성 da 를 v-for 명령 에 연결 한 다음 에 소스 데이터 options 를 교체 합 니 다.그 결과 da 계산 속성 이 정확 하고 selected 속성 은 변 하지 않 았 습 니 다.즉,페이지 의 드 롭 다운 상자 가 펼 쳐 지지 않 은 상태 에서 텍스트 가 바 뀌 지 않 았 습 니 다.다음 그림:

드 롭 다운 상자 의 option 이 업데이트 되 었 음 을 볼 수 있 습 니 다.그러나 selected 속성 은 동기 화 되 지 않 았 습 니 다.지난번 에 선택 한 값 을 캐 시 했 기 때 문 입 니 다.
여기 서 이렇게 설계 하 는 것 이 합 리 적 인지 아 닌 지 는 모르겠다.왜냐하면 나 는 이런 용법 을 비교적 적 게 사용 하기 때문이다.
문제 가 있 으 면 해결 해 야 합 니 다.coptute d 의 계산 속성 에 selected='를 추가 하고 업데이트 의존 할 때마다 selected 속성 을 초기 화 합 니 다.
이상 vue 가 계산 속성 을 변경 한 후 select 선택 값 이 변경 되 지 않 는 문 제 는 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 도 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기