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

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

亚连원래의: 2018-06-01 16:56:261881검색

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

여기서 드롭다운 상자의 옵션이 업데이트된 것을 볼 수 있습니다. , 그러나 선택한 속성은 마지막으로 선택한 값이 캐시되어 있기 때문에 동기적으로 업데이트되지 않았습니다.

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

하지만 문제가 있으면 해결해야 합니다. 계산의 계산 속성에 selected=''를 추가하고 종속성이 업데이트될 때마다 선택된 속성을 재설정합니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

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

관련 기사