（Vuejs）屬性或方法未在實例上定義，但在渲染期間引用

Question

我有一個簡單的按鈕假設在列表中添加一個項目：

          <label for="numit">item number:</label>
          <input type="text" id="numit" :value="idxItemBuy">
          <button id="buyitem" @click="buy($event.target.value)">Buy</button>

 buy() {
    console.log("buy fonction")
    this.currentPlayer.buy(this.idxItemBuy)
  }

但實際上並沒有調用方法購買（而且我不知道我什么時候應該使用 $event.target.value）

Answer 1

您可以閱讀有關 v-model => 將輸入與數據綁定的更多信息（ https://v2.vuejs.org/v2/guide/forms.html或Z5E056C500A1C4B6A7110B50D80B6//s.html.html.文字）

我給你寫了一個有效的代碼

<template>
  <div>
    <label>item number:</label>
    <input type="text" v-model="idxItemBuy" />
    <button @click="buy">Buy</button>

    <ul>
      <li v-for="item in items" :key="item">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      idxItemBuy: "",
      items: [],
    };
  },
  methods: {
    buy() {
      console.log("buy fonction", this.idxItemBuy);
      this.items.push(this.idxItemBuy);
    },
  },
};
</script>