如何使用 Vue.js 方法設置數據屬性

Question

我是 Vue.js 的新手，並試圖顯示從服務器請求的數據。 我創建了一個新的 Vue 應用程序並定義了一個方法：

methods: {
  getData: function() {
    // making a request, parsing the response and pushing it to the array.
    console.log(arr);
    return arr;
    }
  }

該方法工作正常，我可以通過單擊按鈕將數組記錄到控制台。

<button v-on:click="getData">Get me some data</button>

但是，我不確定如何在應用程序中實際使用這個數組。 我想將它保存到一個屬性，然后為用戶顯示它。 起初，我想我可以使用這樣的計算屬性：

computed: {
  values: function() {
    return this.getData;
  }
}

...並使用for循環將其顯示給用戶：

<p v-for="value in values">{{ value }}></p>

至少這個解決方案沒有產生預期的結果。 我可能在這里誤解了 Vue 的一些邏輯。

Answer 1

您需要使用數據屬性。

data() {
   return {
       values: []
   }
},

methods: {
   getData: function() {
       this.values = arr;
   }
}

並循環值