So lösen Sie das Problem, dass sich der ausgewählte Wert nach dem Ändern des berechneten Attributs in Vue nicht ändert. Die spezifischen Vorgänge sind wie folgt-js-Tutorial-php.cn

So lösen Sie das Problem, dass sich der ausgewählte Wert nach dem Ändern des berechneten Attributs in Vue nicht ändert. Die spezifischen Vorgänge sind wie folgt

亚连

Freigeben： 2018-06-01 16:56:26

Original

1812 Leute haben es durchsucht

Im Folgenden werde ich einen Artikel mit Ihnen teilen, der das Problem löst, dass sich der ausgewählte Wert nach dem Ändern des berechneten Attributs in Vue nicht ändert. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich ist.

Beginnen wir mit dem Code:

//...
<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>

Nach dem Login kopieren

Der obige Code verwendet die v-for-Anweisung von Vue, um Daten zu binden, um Optionen zu generieren, aber heute habe ich Ich lerne schreiben. Als ich plötzlich ein Problem entdeckte, habe ich das berechnete Attribut da an die v-for-Anweisung gebunden und dann die Quelldatenoptionen ersetzt. Das Ergebnis war, dass das berechnete Attribut da korrekt war, das ausgewählte Attribut jedoch nicht ändern. Das heißt, der Text des Dropdown-Felds auf der Seite ändert sich nicht, wenn es nicht erweitert wird, wie unten gezeigt:

Hier können Sie sehen, dass die Die Option des Dropdown-Felds wurde aktualisiert, aber das ausgewählte Attribut wird nicht synchron aktualisiert, da der zuletzt ausgewählte Wert zwischengespeichert wird.

Ich weiß nicht, ob das Design hier sinnvoll ist, da ich es selten auf diese Weise verwende.

Aber wenn es Probleme gibt, müssen sie gelöst werden. Fügen Sie selected='' zu den berechneten Attributen in berechnet hinzu und setzen Sie das ausgewählte Attribut jedes Mal zurück, wenn die Abhängigkeit aktualisiert wird.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Beispiele, wie Webpack JS und CSS verpackt und komprimiert

Beispiele für das dynamische Laden und Entfernen von JS/CSS-Dateien Code

Webpack-Vue-Projektentwicklungsumgebung LAN-Zugriffsmethode

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem, dass sich der ausgewählte Wert nach dem Ändern des berechneten Attributs in Vue nicht ändert. Die spezifischen Vorgänge sind wie folgt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!