0
質問内容

入力欄に表示したい文字を入力して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);
            }   
        }
        


    }
};

1 件の回答 1

1

lists が別になってたものをまとめ, this を付けたコード

  • (リアクティブな) データは 辞書(オブジェクト)形式で, 名前と内容のペアであること
  • Vueは push メソッドによる変更にも対処できるが, それは先のデータ ($data) に関するもので, 別経由でアクセスすると変更をキャッチ(?)できない

function sample()
{
  
    //let lists = ["aaa","bbbb"];
    
    return{
        data()
        {
            return {
                lists: ["aaa","bbbb"]
            }
        },
        methods:
        {
            onClick: function(e)
            {
                
                console.log("onClick");
                console.log(document.querySelector("#text").value);

                this.lists.push(document.querySelector("#text").value);
            }   
        },
    }
}
<!DOCTYPE html>
<html lang="ja">
<!--    https://ja.stackoverflow.com/questions/94296/
-->
    <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 type="module">
            import { createApp } from 'vue';
        
            createApp(sample()).mount('#app');
            
        </script>
    </body>
</html>

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。