一定時間経過後画面の一部が切り替わるようにしたい(vue.jsなどを使って)

Question

ユーザーが特定の画面を閲覧しているとき、一定時間経過すると自動的に、その画面の一部が切り替わる仕様にしたいです。
自分が思いついたのは、vue.routerの
<router-link to="/">Home</router-link>
<router-view/>
を使うことでしたが、タブ操作（ユーザーのクリック）が必要なようで時間による画面遷移の実装はできないのではないかと感じました。
vue.jsを使わなくとも、コンポーネントが切り替わりさえすればよいのですが、どうすればいいでしょうか。

追記
質問がわかりづらくてすいません。
具体的に自分のやりたいことを追記いたします。
問題が出る画面があり、①最初はその画面の下で回答をするテキストエリアを配置しています。
一定時間経過後、テキストエリアが消え、②回答者の回答一覧のテーブルが表示されるようにしたいと考えています。
回答一覧はDBからaxiosのgetメソッドを使ってデータを取得します。
javascript初学者ですが、vue.jsのコンポーネントが便利だなあと思い、vue.jsを使って画面を作っていました。
javascriptのsettimeout関数内でaxios.getやremoveを使い実現できるのでしょうか。
差し支えなければ回答をいただければと思います。

Comments

[yambejp]

切り替えるだけならCSSでもできますが・・・

[tofu_fine]

コメントありがとうございます。CSSを勉強します。

Answer 1

こんばんは。
質問の内容がいまいちつかめていないのですが、WEBページで単純に一定時間たった後に表示を変更するのであれば、setTimeout(function, delayTime)を使用して、表示したタイミングで次のコードを実行すればよいかと思います。

setTimeout(function(){
    //表示を変更する処理
}, 表示を変更する処理までの時間);

お試しくだされば幸いです。

Comments

[tofu_fine]

ご回答ありがとうございます。質問の詳細を追記いたします。
settimeoutとremoveを使って実現できるのかもしれません。

[mtripg6666tdr]

これだとVue.jsなどのライブラリは使ってないですがこんな感じでできると思います。
```javascript
//「一定期間」のカウント開始のタイミングで実行します
setTimeout(function(){
axios.get(/*url*/).then(response => {
//responseを使用したデータ処理・DOMへの反映
...
document.getElementById(/*テキストボックスのid*/).style.display = 'none'; // テキストボックスを非表示にして
document.getElementById(/*回答者の回答一覧のテーブルのid*/).style.display = 'block'; // テーブルを表示
})
document.getElementById(/*テキストボックスのid*/).disabled = true; // 時間が経過したら入力を無効に
}, /*時間をミリ秒単位で引数で渡す。例えば一分なら*/60000);
```

[tofu_fine]

うまくいったようです！
大変助かりました。ありがとうございます！