(Vuejs) The instance references a property or method that is not defined, causing an error during render

Question

(Vuejs) The instance references a property or method that is not defined, causing an error during render

I am trying to implement a basic button that adds an item to a list:

<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 function")
    this.currentPlayer.buy(this.idxItemBuy)
  }

However, the method 'buy' is not being called as expected (and I'm uncertain about when to use $event.target.value).

javascript vue.js

Answer 1

Answer №1

To learn more about binding input with data using v-model, check out https://v2.vuejs.org/v2/guide/forms.html or https://v3.vuejs.org/guide/forms.html#text

I have provided a functional code example below:

<template>
  <div>
    <label>Enter item number:</label>
    <input type="text" v-model="selectedItem" />
    <button @click="addToCart"gt;Add to Cart</button>

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

<script>
export default {
  data() {
    return {
      selectedItem: "",
      cartItems: [],
    };
  },
  methods: {
    addToCart() {
      console.log("Adding item to cart", this.selectedItem);
      this.cartItems.push(this.selectedItem);
    },
  },
};
</script>

Answer 2

To learn more about binding input with data using v-model, check out https://v2.vuejs.org/v2/guide/forms.html or https://v3.vuejs.org/guide/forms.html#text

I have provided a functional code example below:

<template>
  <div>
    <label>Enter item number:</label>
    <input type="text" v-model="selectedItem" />
    <button @click="addToCart"gt;Add to Cart</button>

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

<script>
export default {
  data() {
    return {
      selectedItem: "",
      cartItems: [],
    };
  },
  methods: {
    addToCart() {
      console.log("Adding item to cart", this.selectedItem);
      this.cartItems.push(this.selectedItem);
    },
  },
};
</script>

(Vuejs) The instance references a property or method that is not defined, causing an error during render

Answer №1

Similar questions

"Scrolling with Bootstrap Scroll Spy is causing incorrect sections to be

Exploring Vue.js: Accessing nested elements

Using Chrome with Selenium WebDriver in JavaScript (webdriver.js)

Utilizing AJAX and PHP to create a dynamic like button function

What is the best method to hold off on executing code until the Ajax command in JavaScript has

unresolved string constant issue with a django template command

Splitting up JavaScript and HTML within a WordPress environment

Tips for ensuring JavaScript code runs in a specific sequence

"Implementing JQuery to dynamically load an image into a designated div upon clicking

The JavaScript function will only run after the user clicks the button twice

Encounter an INVALID_REQUEST-MISSING_OR_INVALID_REQUEST_BODY error message while attempting to submit file evidence using the PayPal API

Maintaining Image Aspect Ratio with CSS Max-width Property

Failure of click event on IE9 using Ruby Webdriver

The value returned by $route.query.page is incorrect, or there may be an issue with type casting in the v-if condition

Array contains a copy of an object

Replacing images on a sticky element using Jquery

Discovering the selected RadioButton within a Repeater Item: a step-by-step guide

When working with an outdated package, you may encounter a situation where babelHelpers is not

Eliminate any line breaks from the information retrieved from the node event process.stdin.on("data") function

Creating pagination for your Laravel resource API