0

setIntervalVueで条件付きでいくつかの要素をポーリングしてレンダリングしようとしています。しかし、うまくいかないので、データをに設定しましtrueたが、DOM では何も起こりませんでした。

PS: CDN で Vue.js を使用しているため、アプリは VueCLI で作成されていません。

ここに私のHTMLがあります: 

<div id="app">
  <div class="container">
    <h1 v-if="showtext">
      text
    </h1>
  </div>
</div>

これが私のスクリプトです。ステータス 200 の応答が来ると、私のデータは true に切り替わります。コンソールで確認できますが、テキストが DOM でレンダリングされません。

var app = new Vue({
  el: "#app",
  data: {
    polling: null,
    showtext: false
  },
  methods: {
    pollData() {
      this.polling = setInterval(() => {
        axios({
          method: "get",
          url: "https://jsonplaceholder.typicode.com/comments"
        }).then(function(response) {
          console.log(response);
          if (response.status == 200) {
            this.showtext = true
          }
          console.log(this.showtext)
        });
      }, 7000);
    }
  },
  beforeDestroy() {
    clearInterval(this.polling);
  },
  created() {
    this.pollData();
  },
});
4

3 に答える 3

2

テキストがレンダリングされないのはなぜですか?

コンソールに表示されるのはオブジェクトthis.showtextのものではないため...入札先が であるため、グローバル変数です。$datawindow.showtextthisthenwindow

解決：

this代わりにvue インスタンスを次のようにバインドする必要がありますthen。

次を使用してそれを行うことができます：

then((response) => {}) (which binds this implicitly)

また ：

then((function(response) { ... }).bind(this) )
于 2019-07-25T20:04:00.953 に答える