suchen

Heim >Web-Frontend >js-Tutorial >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

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

亚连
亚连Original
2018-06-01 16:56:261887Durchsuche

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>

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie schalte ich die Caching-Funktion von Vue-berechneten Eigenschaften aus? Was sind die spezifischen Schritte?Nächster Artikel：Wie schalte ich die Caching-Funktion von Vue-berechneten Eigenschaften aus? Was sind die spezifischen Schritte?

In Verbindung stehende Artikel

Mehr sehen