집 > 기사 > 웹 프론트엔드 > VUE에서 계산된 속성을 변경한 후 선택한 값이 변경되지 않는 문제를 해결하는 방법

VUE에서 계산된 속성을 변경한 후 선택한 값이 변경되지 않는 문제를 해결하는 방법

php中世界最好的语言원래의: 2018-04-12 13:54:423638검색

이번에는 VUE에서 계산된 속성을 변경한 후 변경되지 않은 선택값을 처리하는 방법을 알려드리겠습니다. VUE에서 계산된 속성을 변경한 후 변경되지 않는 선택값을 처리할 때 주의사항은 무엇인가요? 다음은 실제 사례를 살펴보겠습니다.

먼저 코드를 입력하세요:

//...
<body>
  <p id="qwe">
    <select v-model="selected">
      <option v-for="item in da" :value="item.value">{{item.value}}</option>
    </select>
    <span>{{selected}}</span>
  </p>
  <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 명령어를 사용하여 데이터를 바인딩하여 옵션을 생성합니다. 그런데 오늘 작성을 배우던 중 갑자기 계산된 속성인 da를 v-for 명령어에 바인딩한 다음 대체하는 문제를 발견했습니다. 결과는 da입니다. 계산된 속성은 정확하지만 선택한 속성은 변경되지 않았습니다. 즉, 페이지의 드롭다운 상자 텍스트는 아래와 같이 확장되지 않을 때 변경되지 않습니다.

여기에서 드롭다운 상자의 옵션이

업데이트되었지만 선택한 속성은 마지막으로 선택한 값이 캐시기 때문에 동기적으로 업데이트되지 않은 것을 볼 수 있습니다.

이런 식으로 거의 사용하지 않기 때문에 여기 디자인이 합리적인지 모르겠습니다.

하지만 문제가 있으면 해결해야 합니다. 계산의 계산 속성에

selected=''를 추가하고 종속성이 업데이트될 때마다 선택된 속성을 재설정합니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!