94299


##### 質問内容

入力欄に表示したい文字を入力して`submit`ボタンを押すと`script.js`の変数`lists`配列にその値が挿入されるのですがその文字を表示させたいのですが`.push()`を使っても画面が更新されません。

##### 提示コードの内容

入力欄とボタンと配列の中身を出力するプログラムです。

##### 知りたいこと

script.jsのlists変数の値を再表示する方法が知りたい

##### 実現したいこと

入力欄に表示したい文字を入力して`submit`ボタンを押すと画面の下に入力した値が追加されて表示される。

##### 現状

##### 調べたこと

１，ページの再ロードを試しましたがページを再読み込みしたいわけではないので違いました。  
２，`script.js`の変数`lists`に値が入っていることを確認

##### 参考サイト

push(): <https://qiita.com/_masa_u/items/f9076777b044673eea2a>

##### 環境

OS: windows10  
言語: javascript  
ライブラリ: vue.js

##### index.html

[code]

    <!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/vue@3.2/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>
    
[/code]

##### script.js

[code]

    "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);
                }   
            }
            
    
    
        }
    };
    
[/code]


CC BY-SA 4.0
2023-03-24T10:27:18.893
94296
2023-03-25T05:13:08.690
55177
question
vue.js
vue.jsを用いて配列に追加で入れた値を描画する方法が知りたい。


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

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

[code]

    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);
                }   
            },
        }
    }
[/code]

[code]

    <!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/vue@3.2/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>
[/code]


CC BY-SA 4.0
2023-03-24T14:06:00.400
94299
2023-03-25T05:13:08.690
2023-03-25T05:13:08.690
43025
43025
94296
answer