Heim > Artikel > Web-Frontend > So gehen Sie mit dem Problem um, dass sich der ausgewählte Wert nach der Änderung des berechneten Attributs in VUE nicht ändert

So gehen Sie mit dem Problem um, dass sich der ausgewählte Wert nach der Änderung des berechneten Attributs in VUE nicht ändert

php中世界最好的语言Original: 2018-04-12 13:54:423622Durchsuche

Dieses Mal werde ich Ihnen vorstellen, wie Sie mit dem Problem umgehen können, dass sich der ausgewählte Wert nach der Änderung des berechneten Attributs in VUE nicht ändert, und wie Sie mit dem Problem umgehen, dass der ausgewählte Wert nicht geändert wird ändert sich nicht, nachdem das berechnete Attribut in VUE geändert wurde. Hinweis: Worauf es ankommt Werfen wir einen Blick darauf.

Geben Sie zunächst den Code ein:

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

Der obige Code verwendet die v-for-Anweisung, um Daten zu binden, um Optionen zu generieren. Als ich heute jedoch das Schreiben lernte, entdeckte ich plötzlich ein Problem, nämlich das berechnete Attribut da an die v-for-Anweisung zu binden und dann zu ersetzen Die Quelldatenoptionen sind da. Die berechneten Eigenschaften sind korrekt, aber die ausgewählten Eigenschaften haben sich nicht geändert. Das heißt, der Text des Dropdown-Felds auf der Seite ändert sich nicht, wenn es nicht erweitert wird, wie unten gezeigt:

Hier sehen Sie, dass die Option des Dropdown-Felds aktualisiert wurde, das ausgewählte Attribut jedoch nicht synchron aktualisiert wurde, da es den zuletzt ausgewählten Wert zwischenspeichert.

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 glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

AjaxUpLoad.js zum Hochladen von Dateien

So verwenden Sie die Karussellkomponente von Vue

Das obige ist der detaillierte Inhalt vonSo gehen Sie mit dem Problem um, dass sich der ausgewählte Wert nach der Änderung des berechneten Attributs in VUE nicht ändert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php for select

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：So deaktivieren Sie die Caching-Funktion von Vue-berechneten EigenschaftenNächster Artikel：So deaktivieren Sie die Caching-Funktion von Vue-berechneten Eigenschaften

In Verbindung stehende Artikel

Mehr sehen