Vue配列が更新されない

Question

テーブル行の値を受け取り、それをリストに入れたjqueryのクリック機能があります。次に、vue配列と同じリストを設定します。ここには配列があります。 アレイ：

tableRow: [ 
       { 
        "name": "1", 
        "numSongs": "2", 
        "Year": "3" 
       } 
      ] 

が機能：

$("#table1 tr").click(function() { 
     var list = []; 

     var $row = $(this).closest("tr"), 
      $tds = $row.find("td"); 

     list.push({ name: $tds.eq(0).text(), numSongs: $tds.eq(1).text(), Year: $tds.eq(2).text() }); 
     this.tableRow = list; 
     console.log(this.tableRow); 
    }); 

私はまた、リストの値のアプリがロードされ、ときに私はそれをクリックして、それが変化しないのログを記録。

次に、値が単純なアラート機能に変更されたかどうかをテストする機能があります。

しかし、値が関数で更新されない理由は分かりますか？コードは

export default { 

    data() { 
     return { 
      tableRow: [ 
       { 
        "name": "1", 
        "numSongs": "2", 
        "Year": "3" 
       } 
      ] 
     } 
    }, 
    mounted: function() { 
     console.log(this.tableRow); 
     this.$nextTick(() => { 
      $("#table1 tr").click(function() { 
       var list = []; 

       var $row = $(this).closest("tr"), 
        $tds = $row.find("td"); 

       list.push({ name: $tds.eq(0).text(), numSongs: $tds.eq(1).text(), Year: $tds.eq(2).text() }); 
       this.tableRow = list; 
       console.log(this.tableRow); 
      }); 
     }); 
    }, 

    methods: { 
     greet: function() { 
      // `this` inside methods points to the Vue instance 
      alert('Hello ' + this.tableRow[0].name) 
     }, 
} 
} 

Answer 1

これはあなたのクリックハンドラでthis

のスコープの問題が原因であるあなたtableRowはVUEのインスタンスにデータオプションのプロパティをあるthis.tableRow = listを行っている

Vueのインスタンスけどthisがvueインスタンスを指していない場合は、イベントを呼び出す要素を参照します。

だから、このようにそれを実行します。

mounted: function() { 
    var self = this; 
    console.log(this.tableRow); 
    this.$nextTick(() => { 
     $("#table1 tr").click(function() { 
      var list = []; 

      var $row = $(this).closest("tr"), 
       $tds = $row.find("td"); 

       list.push({ name: $tds.eq(0).text(), numSongs: $tds.eq(1).text(), Year: $tds.eq(2).text() }); 
       self.tableRow = list; 
       console.log(this.tableRow); 
     }); 
    }); 
},