次のイベントループで関数を実行するいくつかの方法

vue.jsだと、vue.nextTickでできる


this.$nextTick(()=>{
  ...
});

Javascriptでよく使われるのはsetTimeout


setTimeout(()=>{
  ...
},0)

Promiseでもできる


Promise.resolve().then(() => {
  ...
});

ちょっと違うけど、ReactだとsetStateで関数を実行することで、上記の代替になるかも


setState(()=>{
 ...
})

vueでモバイル判定をする

ユーザーエージェントで判定

isMobile.js

ライブラリを追加

yarn add ismobilejs

テンプレートで出し分けしたい場合


  <template>
    <div v-if="isMobile.phone">
      <div>モバイルで表示</div>
    </div>
  </template>
  import isMobile from "ismobilejs";
  export default {
    data:()=>{
      isMobile
    }
  }

レスポンシブで判定

vue-mq

ライブラリを追加

yarn add vue-mq

テンプレートで出し分けしたい場合


  <template>
    <div v-if="$mq==='sp'">
      <div>モバイルで表示</div>
    </div>
  </template>
  <script>
  import Vue from "vue";
  import VueMq from "vue-mq";

  const breakpoints = {
    sp: 400,
    pc: 1024
  };
  Vue.use(VueMq, { breakpoints });
  </script>