vue.jsのmethodsで非同期処理をして表示する方法

Question

以下の結果は、
画面上に「hoge」と出てきます

<div id="app">
  {{test()}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
  el: '#app',
  data:{},
  methods:{
    test(){
      return 'hoge';
    }
  }
});
</script>

このmethodsの部分にapi等で
値を取ってきて表示するというメソッドを組み込みたいのですがうまくいきません
例えばそれをsettimeout表現すると

<div id="app">
  {{test()}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
  el: '#app',
  data:{},
  methods:{
    test(){
      new Promise(resolve=>{
        setTimeout(()=>{
          return resolve(1);
        },2000);
      }).then(data=>{
        return 'hoge';
      });
    }
  }
});
</script>

期待する結果は「hoge」ですが実際には空になってしまいます

methodsで非同期処理をして「hoge」を表示するやり方をご存じの方お教えくださいませ

Answer 1

methodsで返却したPromiseをtemplate内で表示することはできません。[object Promise]となります。yambejpさんが書かれているように

new Vue({
  el: "#app",
  data: { ret: null },
  created() {
    this.test();
  },
  methods: {
    test() {
      new Promise(resolve => {
        setTimeout(() => {
          return resolve('hoge');
        }, 2000);
      }).then(data => {
        this.ret = data;
      });
    }
  }
});

JS Bin - JS Bin

dataを経由して、初期化した値retを変更して表示するか、vuexを使用してcomputedな値を表示してください。

posva/vue-promisedのような、promiseを受け取り、状態によって表示を振り分けるコンポーネントも存在するので、場合によっては有用なケースもあります。（v1.2.2現在はエラー周りのハンドリングが弱いので、自分には有害と感じました）

Comments

[tesopgmh]

ありがとうございます！やっぱりできないんですね
丁寧なサンプルもありがとうございました！

Answer 2

methodsでやることではないのでは？

Comments

[yambejp]

<div id="app">
{{ret}}
</div>
<script>
var app = new Vue({
el: '#app',
data:{
ret:"",
},
});
new Promise(resolve=>{
setTimeout(()=>resolve(1),2000);
}).then(data=>{
app.ret='fuga';
});
</script>

[tesopgmh]

できないのですね、ありがとうございます！