質問内容
入力欄に表示したい文字を入力してsubmit
ボタンを押すとscript.js
の変数lists
配列にその値が挿入されるのですがその文字を表示させたいのですが.push()
を使っても画面が更新されません。
提示コードの内容
入力欄とボタンと配列の中身を出力するプログラムです。
知りたいこと
script.jsのlists変数の値を再表示する方法が知りたい
実現したいこと
入力欄に表示したい文字を入力してsubmit
ボタンを押すと画面の下に入力した値が追加されて表示される。
現状
調べたこと
1,ページの再ロードを試しましたがページを再読み込みしたいわけではないので違いました。
2,script.js
の変数lists
に値が入っていることを確認
参考サイト
push(): https://qiita.com/_masa_u/items/f9076777b044673eea2a
環境
OS: windows10
言語: javascript
ライブラリ: vue.js
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script type="importmap">
{
"imports": {
"vue": "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.esm-browser.prod.js"
}
}
</script>
<!-- #################################################################### -->
<div id="app">
<input type="text" id="text">
<button type="button" v-on:click="onClick">submit</button>
<ul>
<li v-for="result in lists"> {{ result }}</li>
</ul>
</div>
<!-- #################################################################### -->
<script src="script.js"></script>
<script type="module">
import { createApp } from 'vue';
createApp(sample()).mount('#app');
</script>
</body>
</html>
script.js
"use strict"
function sample()
{
let lists = ["aaa","bbbb"];
return{
data()
{
return {
lists
}
},
methods:
{
onClick: function(e)
{
console.log("onClick");
console.log(document.querySelector("#text").value);
lists.push(document.querySelector("#text").value);
}
}
}
};