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

Posted 2023-02-22

【中文标题】（Vuejs）属性或方法未在实例上定义，但在渲染期间引用

【英文标题】：(Vuejs) Property or method is not defined on the instance but referenced during render

【发布时间】：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）

【参考方案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>