So lassen Sie Vue die berechnete Eigenschaft ändern, aber nicht den ausgewählten Wert von select-H5-Tutorial-php.cn

So lassen Sie Vue die berechnete Eigenschaft ändern, aber nicht den ausgewählten Wert von select

php中世界最好的语言

Freigeben： 2018-03-27 17:29:32

Original

2236 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie Vue das berechnete Attribut ändern lassen, aber nicht den ausgewählten Wert von select. Welche Vorsichtsmaßnahmen gibt es, damit Vue das berechnete Attribut ändert? Ändern Sie den ausgewählten Wert von select nicht. Das Folgende ist ein praktischer Fall. Schauen wir uns das an.

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: '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>

Nach dem Login kopieren

Der obige Code verwendet die v-for-Anweisung von Vue, um Daten zu binden, um Optionen zu generieren, aber Als ich heute schreiben lernte, entdeckte ich plötzlich ein Problem, das darin bestand, das berechnete Attribut da an die v-for-Anweisung zu binden und dann die Quelldatenoptionen zu ersetzen. Infolgedessen war das berechnete Attribut da korrekt, aber das Das ausgewählte Attribut hat 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 können Sie sehen, dass die Die Option des Dropdown-Felds wurde aktualisiert, das ausgewählte Attribut wird jedoch nicht synchron aktualisiert, 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:

Wie jQuery das Umschalten nach links und rechts implementiert

Lösen Sie v-for mit rot und rot in vue-Warnung erscheint

Das obige ist der detaillierte Inhalt vonSo lassen Sie Vue die berechnete Eigenschaft ändern, aber nicht den ausgewählten Wert von select. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!