Vue的數組不更新

Question

我有一個錶行，是以錶行的值，並將其放入一個列表，然後我設置列表等於VUE陣列我這裏是陣列jQuery的點擊功能。 陣列：

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); 
    }); 

我還記錄列表的值當應用程序加載時，當我點擊它，它確實發生了改變。

然後我有一個函數來測試值是否已經改變了只是一個簡單的警報功能。

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

但該值不更新在函數中沒有人知道爲什麼。

Vue的實例代碼

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

在您單擊處理範圍界定問題，你正在做this.tableRow = list其中tableRow是數據選項的屬性在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); 
     }); 
    }); 
},