（Vuejs）属性或方法未在实例上定义，但在渲染期间引用

【问题标题】：(Vuejs) Property or method is not defined on the instance but referenced during render（Vuejs）属性或方法未在实例上定义，但在渲染期间引用
【发布时间】：2022-01-24 01:33:54
【问题描述】：

我有一个简单的按钮假设在列表中添加一个项目：

          <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）

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

您可以阅读有关 v-model 的更多信息 => 将输入与数据绑定（https://vuejs.org/v2/guide/forms.html 或 https://v3.vuejs.org/guide/forms.html#text）

我给你写了一个有效的代码

<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>

【讨论】：