Vue.js v-wenn keine Reaktion auf die variable ändern

ich bin Herumspielen mit vue.js und haben einige Kampf mit v-wenn richtig.

ich versuche eine bedingte template-rendering innerhalb einer Vorlage. in der erstellten Methode, die variable isloaded ist auf true gesetzt, was dazu führen sollte, die Vorlage gerendert und lassen Sie die "Daten werden geladen" - Meldung verschwinden.

Jedoch, das Protokoll angegeben, die Verzögerung von 2s funktioniert, so dass der Rückruf ist erreicht, aber wie es aussieht bin ich nicht die Aktualisierung der Daten Variablen richtig.

Ich versuchte schon mehrere Sachen und ich jetzt geändert "true/false" werden Zeichenfolgen, um näher an die exampled auf der offiziellen homepage, aber noch keinen Erfolg. ich hoffe Ihr könnt mir helfen und dafür vielen Dank im Voraus.

unten finden Sie interessante codesnippets:

JS:

var step1 = Vue.component('step1', {
  template: '#step1',
  data: function() {
    return {
      accounts: [],
      isloaded: 'false'
    }
  },
  created: function() {
    console.log("created");
    setTimeout(function() {
      console.log("times over");
      this.isloaded = 'true';
      this.accounts = [{
        id: 1234,
        name: "germany"
      }];
    }, 2000);
  },
  methods: {
    loaded: function() {
      console.log(this.isloaded === 'true');
      return this.isloaded === 'true';
    }
  }

})

new Vue({
  el: '#main'
});

HTML:

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<template id="step1">
  <div class="step1">
    <h1>Welcome please choose your account:</h1>
    <template v-if="isloaded === 'false'">
      <p>Loading Data</p>
    </template>
    <template v-else>
      <select>
        <template v-for="account in accounts">
          <option :value="account.id">{{ account.name }}</option>
        </template>
      </select>
    </template>

  </div>
</template>

<div id="main">
  <step1></step1>
</div>

Das wird nicht das Problem lösen, kann aber verhindern, dass weitere Probleme auf der ganzen Linie. Da isLoaded ist ein boolescher Wert, man sollte Sie als solche behandeln. 'true' und 'false' sollte nur true und false

InformationsquelleAutor Manuel Jain | 2017-01-31

javascript vue.js

Aus der Vue.js - Reaktivität in der Tiefe docs:

Beispielsweise, wenn Sie festlegen, vm.someData = 'neuer Wert', der Komponente
nicht re-Rendern sofort. Es aktualisiert wird, in der nächsten "tick",
wenn die Warteschlange geleert wird.

Mit den Daten mutiert in dem erstellten Lebenszyklus-Haken, brauchen wir $nextTick Mehr Infos finden Sie in der oben genannten Seite.

JS:

var step1 = Vue.component('step1', {
  template: '#step1',
  data: function() {
    return {
      accounts: [],
      isloaded: false
    }
  },
  created: function() {
    console.log("created");
    var self = this;
    setTimeout(function() {
      console.log("times over");
      self.$nextTick(function() {
        self.isloaded = true;
        self.accounts = [{
          id: 1234,
          name: "germany"
        }];
      })

    }, 2000);
  }

})

new Vue({
  el: '#main'
});

HTML:

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<template id="step1">
  <div class="step1">
    <h1>Welcome please choose your account:</h1>
    <template v-if="isloaded===false">
      <p>Loading Data</p>
    </template>
    <template v-else>
      <select>
        <template v-for="account in accounts">
          <option :value="account.id">{{ account.name }}</option>
        </template>
      </select>
    </template>

  </div>
</template>

<div id="main">
  <step1></step1>
</div>

Jedoch, wenn Sie den code, der das laden der Daten in eine Methode und rufen diese Methode aus der created Haken. Es funktioniert ohne $nextTick.

methods: {
    loadData: function() {
        var self = this;
        setTimeout(function() {
            console.log("times over");
            self.isloaded = true;
            self.accounts = [{
                id: 1234,
                name: "germany"
            }];
        }, 2000);
    }
},
created: function() {
    console.log("created");
    this.loadData();
}

InformationsquelleAutor ZeroBased_IX

4

Den Umfang der this ist falsch. Die function () syntax Ihren eigenen Bereich erstellt. Sie können speichern Sie den richtigen Bereich in einer var und verwenden Sie diese, wie folgt:
```
created: function() {
  var that = this
  setTimeout(function() {
    console.log("times over");
    that.isloaded = 'true';
    that.accounts = [{
      id: 1234,
      name: "germany"
    }];
  }, 2000);
},
```
Alternativ können Sie Pfeil-Funktion, die nicht binden, es ist ein eigenes diese, Argumente, super, oder neue.Ziel.
```
created: function() {
  setTimeout(() => {
    console.log("times over");
    this.isloaded = 'true';
    this.accounts = [{
      id: 1234,
      name: "germany"
    }];
  }, 2000);
},
```
- Hah, scheint, ich, über-dachte meine Antwort. Gute Arbeit! Edit: Es ist erwähnenswert, dass es keine Unterstützung für den IE11 mit Pfeil-Funktionen, die nativ: caniuse.com/#feat=arrow-functions
InformationsquelleAutor Saurabh

-2

Aktualisieren Sie Ihre Methode, um nur ein =, und entfernen Sie die Rückkehr.

methods: {
  loaded: function() {
    console.log(this.isloaded === 'true');
    this.isloaded = 'true';
  }
}

InformationsquelleAutor thedanotto

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.