vue는 선택된 값을 변경하지 않고 select 메소드를 구현합니다.-JS 튜토리얼-php.cn

vue는 선택된 값을 변경하지 않고 select 메소드를 구현합니다.

小云云

풀어 주다： 2018-03-03 11:02:08

원래의

4371명이 탐색했습니다.

이 글은 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의 계산된 속성은 정확하지만 선택한 속성은 변경되지 않았습니다. 즉, 아래와 같이 확장되지 않은 경우 페이지의 드롭다운 상자 텍스트는 변경되지 않았습니다.