Vue에서 계산된 속성을 변경한 후 선택한 값이 변경되지 않는 문제를 해결하는 방법 구체적인 작업은 다음과 같습니다.-JS 튜토리얼-php.cn

Vue에서 계산된 속성을 변경한 후 선택한 값이 변경되지 않는 문제를 해결하는 방법 구체적인 작업은 다음과 같습니다.

亚连

풀어 주다： 2018-06-01 16:56:26

원래의

1812명이 탐색했습니다.

이제 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: &#39;111&#39;,
      label: &#39;aaa&#39;
    }, {
      value: &#39;222&#39;,
      label: &#39;bbb&#39;
    }, {
      value: &#39;333&#39;,
      label: &#39;ccc&#39;
    }, {
      value: &#39;444&#39;,
      label: &#39;ddd&#39;
    }, {
      value: &#39;555&#39;,
      label: &#39;fff&#39;
    }];
    var vm = new Vue({
      el: &#39;#qwe&#39;,
      data: {
        options: [{
          value: &#39;选项1&#39;,
          label: &#39;黄金糕&#39;
        }, {
          value: &#39;选项2&#39;,
          label: &#39;双皮奶&#39;
        }, {
          value: &#39;选项3&#39;,
          label: &#39;蚵仔煎&#39;
        }, {
          value: &#39;选项4&#39;,
          label: &#39;龙须面&#39;
        }, {
          value: &#39;选项5&#39;,
          label: &#39;北京烤鸭&#39;
        }],
        selected: &#39;&#39;
      },
      computed: {
        da: function () {
          var _self = this;
          return _self.options.filter(function (item) {
            return +item.value.split(&#39;&#39;)[2] > 2;
          });
        }
      }
    })
  </script>
</body>
</html>

로그인 후 복사

위 코드는 vue의 v-for 명령을 사용하여 데이터를 바인딩하여 옵션을 생성하는데, 오늘 글쓰기를 배우던 중 갑자기 문제를 발견했습니다. 계산된 속성 da를 for 명령에서 v-로 변경한 다음 소스 데이터 옵션을 교체합니다. 결과적으로 da의 계산된 속성은 정확하지만 선택한 속성은 변경되지 않았습니다. 즉, 아래와 같이 확장되지 않은 경우 페이지의 드롭다운 상자 텍스트는 변경되지 않았습니다.