Uncaught TypeError: Cannot read property 'e' of undefined in vue.js

Question

Uncaught TypeError: Cannot read property 'e' of undefined in vue.js

Feeling a bit frustrated now :( This is my first time trying to use vue.js, which comes after jQuery as the second JS framework I'm diving into on this planet. Here's the HTML code I have:

var main = new Vue({
  el: ".main-content",
  data: {
    heading: "First Vue Page",
    usdamount: 0,
    currencies: [{
        label: "GBP",
        rate: 0.7214,
        value: 0
      },
      {
        label: "EUR",
        rate: 0.80829,
        value: 0
      },
      {
        label: "CAD",
        rate: 1.2948,
        value: 0
      }
    ]
  },
  computed: {
    updateCurrencies: function() {
      console.log(this.usdamount);
      var usd = parseFloat(this.usdamount);
      for (var i = this.currencies.length - 1; i >= 0; i--) {
        this.currencies[i].value = this.currencies[i].rate * usd;
      }
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<section class="main-content">
  <h1>{{ heading }}</h1>
  <input type="number" v-on:change="updateCurrencies" v-model="usdamount">
  <p class="cur-value" v-for="cur in currencies">
    <strong>{{ cur.label }}</strong>: {{ cur.value }}
  </p>
</section>

Upon loading the page, everything seems to be working fine and I see a zero logged on the console. However, when I attempt to change the input field, an error message pops up:

TypeError: e is undefined
Stack trace:
we@https://cdn.jsdelivr.net/npm/vue:6:26571
X@https://cdn.jsdelivr.net/npm/vue:6:7441
...

I tried looking into the specific code causing the issue but got even more confused. It seems to be happening within this function:

function we(t,e,n,r){(r||si).removeEventListener(t,e._withTask||e,n)}

Despite multiple attempts at troubleshooting and isolating the problem, I'm still unsure about what's triggering this error.

javascript vue.js vuejs2

Answer 1

Answer №1

computed is a feature in Vue that automatically recalculates whenever a data property from your VM changes. To attach a method to an event handler, use the methods block:

var main = new Vue({
  el: ".main-content",
  data: {
    heading: "First Vue Page",
    usdamount: 0,
    currencies: [{
        label: "GBP",
        rate: 0.7214,
        value: 0
      },
      {
        label: "EUR",
        rate: 0.80829,
        value: 0
      },
      {
        label: "CAD",
        rate: 1.2948,
        value: 0
      }
    ]
  },
  methods: {
    updateCurrencies: function() {
      console.log(this.usdamount);
      var usd = parseFloat(this.usdamount);
      for (var i = this.currencies.length - 1; i >= 0; i--) {
        this.currencies[i].value = this.currencies[i].rate * usd;
      }
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<section class="main-content">
  <h1>{{ heading }}</h1>
  <input type="number" v-on:change="updateCurrencies" v-model="usdamount">
  <p class="cur-value" v-for="cur in currencies">
    <strong>{{ cur.label }}</strong>: {{ cur.value }}
  </p>
</section>

If your data depends on usdamount and should be adjusted whenever that value changes, making currencies a computed property would be a better approach:

var main = new Vue({
  el: ".main-content",
  data: {
    heading: "First Vue Page",
    usdamount: 0,

  },
  computed: {
    currencies() {
      let cur = [{
          label: "GBP",
          rate: 0.7214,
          value: 0
        },
        {
          label: "EUR",
          rate: 0.80829,
          value: 0
        },
        {
          label: "CAD",
          rate: 1.2948,
          value: 0
        }
      ];
      for (var i = cur.length - 1; i >= 0; i--) {
        cur[i].value = cur[i].rate * parseFloat(this.usdamount);
      }
      return cur;
    }

  }
});

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<section class="main-content">
  <h1>{{ heading }}</h1>
  <input type="number" v-model="usdamount">
  <p class="cur-value" v-for="cur in currencies">
    <strong>{{ cur.label }}</strong>: {{ cur.value }}
  </p>
</section>

This eliminates the need to manually implement a listener and instead leverages Vue's mechanisms to update your data and DOM.

Answer 2

computed is a feature in Vue that automatically recalculates whenever a data property from your VM changes. To attach a method to an event handler, use the methods block:

var main = new Vue({
  el: ".main-content",
  data: {
    heading: "First Vue Page",
    usdamount: 0,
    currencies: [{
        label: "GBP",
        rate: 0.7214,
        value: 0
      },
      {
        label: "EUR",
        rate: 0.80829,
        value: 0
      },
      {
        label: "CAD",
        rate: 1.2948,
        value: 0
      }
    ]
  },
  methods: {
    updateCurrencies: function() {
      console.log(this.usdamount);
      var usd = parseFloat(this.usdamount);
      for (var i = this.currencies.length - 1; i >= 0; i--) {
        this.currencies[i].value = this.currencies[i].rate * usd;
      }
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<section class="main-content">
  <h1>{{ heading }}</h1>
  <input type="number" v-on:change="updateCurrencies" v-model="usdamount">
  <p class="cur-value" v-for="cur in currencies">
    <strong>{{ cur.label }}</strong>: {{ cur.value }}
  </p>
</section>

If your data depends on usdamount and should be adjusted whenever that value changes, making currencies a computed property would be a better approach:

var main = new Vue({
  el: ".main-content",
  data: {
    heading: "First Vue Page",
    usdamount: 0,

  },
  computed: {
    currencies() {
      let cur = [{
          label: "GBP",
          rate: 0.7214,
          value: 0
        },
        {
          label: "EUR",
          rate: 0.80829,
          value: 0
        },
        {
          label: "CAD",
          rate: 1.2948,
          value: 0
        }
      ];
      for (var i = cur.length - 1; i >= 0; i--) {
        cur[i].value = cur[i].rate * parseFloat(this.usdamount);
      }
      return cur;
    }

  }
});

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<section class="main-content">
  <h1>{{ heading }}</h1>
  <input type="number" v-model="usdamount">
  <p class="cur-value" v-for="cur in currencies">
    <strong>{{ cur.label }}</strong>: {{ cur.value }}
  </p>
</section>

This eliminates the need to manually implement a listener and instead leverages Vue's mechanisms to update your data and DOM.

Answer 3

Answer №2

In my previous comment, I mentioned that it would be more appropriate to use the methods property for your v-on:change callback.

This simply entails changing computed to methods

If you're unsure about the distinction between the computed and methods property, refer to the vuejs documentation covering both aspects.

Here's a functional demo

var main = new Vue({
  el: ".main-content",
  data: {
    heading: "First Vue Page",
    usdamount: 0,
    currencies: [{
        label: "GBP",
        rate: 0.7214,
        value: 0
      },
      {
        label: "EUR",
        rate: 0.80829,
        value: 0
      },
      {
        label: "CAD",
        rate: 1.2948,
        value: 0
      }
    ]
  },
  methods: {
    updateCurrencies: function() {
      console.log(this.usdamount);
      var usd = parseFloat(this.usdamount);
      for (var i = this.currencies.length - 1; i >= 0; i--) {
        this.currencies[i].value = this.currencies[i].rate * usd;
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>

<section class="main-content">
  <h1>{{ heading }}</h1>
  <input type="number" v-on:change="updateCurrencies" v-model="usdamount">
  <p class="cur-value" v-for="cur in currencies">
    <strong>{{ cur.label }}</strong>: {{ cur.value }}
  </p>
</section>

Answer 4

In my previous comment, I mentioned that it would be more appropriate to use the methods property for your v-on:change callback.

This simply entails changing computed to methods

If you're unsure about the distinction between the computed and methods property, refer to the vuejs documentation covering both aspects.

Here's a functional demo

var main = new Vue({
  el: ".main-content",
  data: {
    heading: "First Vue Page",
    usdamount: 0,
    currencies: [{
        label: "GBP",
        rate: 0.7214,
        value: 0
      },
      {
        label: "EUR",
        rate: 0.80829,
        value: 0
      },
      {
        label: "CAD",
        rate: 1.2948,
        value: 0
      }
    ]
  },
  methods: {
    updateCurrencies: function() {
      console.log(this.usdamount);
      var usd = parseFloat(this.usdamount);
      for (var i = this.currencies.length - 1; i >= 0; i--) {
        this.currencies[i].value = this.currencies[i].rate * usd;
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>

<section class="main-content">
  <h1>{{ heading }}</h1>
  <input type="number" v-on:change="updateCurrencies" v-model="usdamount">
  <p class="cur-value" v-for="cur in currencies">
    <strong>{{ cur.label }}</strong>: {{ cur.value }}
  </p>
</section>

Uncaught TypeError: Cannot read property 'e' of undefined in vue.js

Answer №1

Answer №2

Similar questions

What is the best way to delete a jQuery.bind event handler that has been created for an event

Tips for executing a function in the HC-Sticky plugin?

A sleek CSS text link for a stylish video carousel

The Ajax search box displays results from the most recent query

The successful JSON response in an Ajax request is not functioning as expected

Step-by-step guide on accessing the Vue instance within the script tag prior to the export default in Nuxt.js

What is the best way to display text from one text field onto another text field?

Next.JS reported that it "Executed a greater number of hooks compared to the previous render"

Navigate through the Jquery slider by continuously scrolling to the right or simply clicking

Unusual behavior involving the selection of $stateParams

Tips for interacting with a custom web component using Selenium WebDriver

What is the method with the greatest specificity for applying styles: CSS or JS?

Encountering an issue with the removal of slides when updating JSON data for angular-flexslider

Dynamic Form Submission - Displaying Notifications for Success and Failure

Determine total number of covid-19 cases with JavaScript

Mapping various sets of latitudes and longitudes on Google Maps

Find and Scroll Dropdown Menu with Bootstrap Framework

How can I optimize my .find query for a MongoDB GET request to achieve maximum performance?

Having trouble retrieving the full HTML code with the execute_script function in Python while web scraping

Angular 2 Encounter Error When Trying to Access Undefined Property in a Function