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

집

웹 프론트엔드

JS 튜토리얼

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

Jun 01, 2018 pm 04:56 PM

재산 변화 믿다

이제 Vue에서 계산된 속성을 변경한 후 선택한 값이 변경되지 않는 문제를 해결한 기사를 공유하겠습니다. 좋은 참고 값이 있어 모든 분들께 도움이 되기를 바랍니다.

코드부터 시작해 보겠습니다.

//...
&lt;body&gt;
  &lt;p id=&quot;qwe&quot;&gt;
    &lt;select v-model=&quot;selected&quot;&gt;
      &lt;option v-for=&quot;item in da&quot; :value=&quot;item.value&quot;&gt;{{item.value}}&lt;/option&gt;
    &lt;/select&gt;
    &lt;span&gt;{{selected}}&lt;/span&gt;
  &lt;/p&gt;
  &lt;script&gt;
    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] &gt; 2;
          });
        }
      }
    })
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

로그인 후 복사

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