83186


アプリの外部から変数を代入しようとしても、うまく反映しません。  
ＨＴＭＬのタグにアプリをマウントの仕方によって挙動が変わるのはなぜでしょうか。

反映しないコード：

[code]

    <div id="app">
      <ul v-for="player in players">
        <li>{{player.name}}, {{player.age}}</li>
      </ul>
    </div>
    
    <!-- VueJS -->
    <script src="https://unpkg.com/vue@3.2.20"></script>
    
    <script>
    let app= Vue.createApp({
        data() {
            return {
                players : []
            }
        },
    })
    
    
    app.players=[
        {name: 'nobita', age: 13},
        {name: 'suneo', age: 13},
        {name: 'sizuka', age: 13},
        {name: 'takeshi', age: 13},
    ]
    
    app.mount("#app")//<=====ここ
    
    </script>
    
[/code]

反映するコード：

[code]

    <div id="app">
      <ul v-for="player in players">
        <li>{{player.name}}, {{player.age}}</li>
      </ul>
    </div>
    
    <!-- VueJS -->
    <script src="https://unpkg.com/vue@3.2.20"></script>
    
    <script>
    let app= Vue.createApp({
        data() {
            return {
                players : []
            }
        },
    }).mount("#app")  //<=====ここ
    
    
    app.players=[
        {name: 'nobita', age: 13},
        {name: 'suneo', age: 13},
        {name: 'sizuka', age: 13},
        {name: 'takeshi', age: 13},
    ]
    
    </script>
    
[/code]


CC BY-SA 4.0
2021-10-19T08:25:25.453
83172
2021-10-20T05:57:02.110
48715
question
vue.js
アプリの外からデータを入れても反映しない。


内部コードを読んでいないので推測ですがdataオプションはgetter/setterが内部的に生成されます  
そのタイミングがmount時に行われているのではないでしょうか

以下のようにmountが返すオブジェクトに対して代入すれば反映されます

[code]

    let app = Vue.createApp({
      data() {
        return {
          players: []
        };
      }
    });
    
    app.players = [
      { name: "nobita", age: 13 },
      { name: "suneo", age: 13 },
      { name: "sizuka", age: 13 },
      { name: "takeshi", age: 13 }
    ];
    
    app = app.mount("#app");
    
    app.players = [
      { name: "nobita", age: 13 },
      { name: "suneo", age: 13 },
      { name: "sizuka", age: 13 },
      { name: "takeshi", age: 13 }
    ];
    
    
[/code]


CC BY-SA 4.0
2021-10-20T05:57:02.110
83186
2021-10-20T05:57:02.110
298
83172
answer