◆結論

Vue.set使いなはれ。

Vue：オブジェクトの変更検出の注意

◆経緯

TypeScriptで連想配列をIndex Signaturesで作るじゃん？んで、その中身書き換えんじゃん？

変更が反映されないんすよ。

  private hoge = {} as {[key: number]: string};
  private created(){
    this.hoge[0] = 'ちんちん';
  }
  private piyo(){
    this.hoge[0] = 'もがもが';
  }

piyoを呼んでも内容が書き変わらない。ぴぎゃあ！

◆理由

いくらオメー連想配列って言い張ったって、最終的にはJavaScriptになっちまうだろうが。JavaScriptの連想配列ってそれつまり、ただの数人オブジェクトだろうが。

新しいインデックスに値を代入したところで、JavaScript的にはオブジェクトにフィールド増やす操作でしかない。

フィールド勝手に増やされてもVueにとっては知ったこっちゃないし、それはバインドされねぇだろ。

◆解決

「Vue.set」とか「this.$set」とか使おうよ。フィールド増えた事を通知しろよ。

いやね？それらの意味も存在も知ってたんですよ？でもなんかIndex Signaturesってkey-valueの配列っぽいからbindされるって思うじゃないですか。

？？？「でも配列操作ってpushとか使うじゃん」

…そうだね。

▼かきかた

  private hoge = {} as {[key: number]: string};
  private created(){
    Vue.set(this.hoge, 0, 'ちんちん');
  }
  private piyo(){
    Vue.set(this.hoge, 0, 'もがもが');
  }

つらいな。型が安全じゃないのが死ねる。まーしゃあねぇけど。JavaScript、EcmaScriptが滅ぶまで戦い続けるしかない。

◆おまんけ

イベントからメソッド呼ぶときに別の値も流したい時はラムダ式書けよ…

ラムダ式書けよ！！！！

<button @click="(e) => onKenma(e, 'ちば')">ちばけんま！</button>
private onKenma(e: MouseEvent, target: string){
  console.log(`${target}けんま！`);
}

つって新しくメソッド生やさなくてもいいけどね。

(v) => (hoge = v)

みてぇな書き方もできますわよね。hoge に v が代入されますわよね。

◆結論（にかいめ）

関係ないけどラムダ式のthisが腐るのホントがっでむ。「フィールドアクセスできねぇぜ」にしてもらった方がまだ良かった。

あとtemplateにTypeScript書かせろや。「?.」とか「??」とか使わせろや。

いや書けるの？どうなの？