data not updating when setting it in mounted document ready (VUEJS)

Question

i assign a name inside the data. and in my mounted i want to save the variable in tthe data. however i try this.listcount = cc inside the mounted. but when i try to display listcount in my template it is giving me 0 which this value is the one i assign in data. i want the value to 2 not 0. can anyone help me thank you. this is the code.

https://codesandbox.io/s/pedantic-noyce-viq8q?file=/src/App.vue:0-713

App.vue

<template>
  <div id="app">List data: {{ listcount }}</div>
</template>

<script>
import $ from "jquery";
export default {
  name: "App",
  components: {},
  data() {
    return {
      listcount: 0,
    };
  },
  mounted() {
    $(document).ready(function () {
      var cc = 2;
      this.listcount = cc;
      console.log("LIST DATA", this.listcount);
    });
  },
  computed: {
    total() {
      console.log("TOTAL", this.listcount);
      return this.listcount;
    },
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Ohgodwhy · Accepted Answer · 2021-02-22 05:19:22Z

3

There is no need for the document.ready call within mounted(). this.listcount = cc works fine.

If you insist, the other issue is that .ready(function () { changes the scope of this, so you would at least need to use a fat arrow. Otherwise this will be the closure. With a fat arrow, this will be the Vue component. Observe:

$(document).ready(() => {
  var cc = 2;
  this.listcount = cc;
  console.log("LIST DATA", this.listcount);
});

answered Feb 22, 2021 at 5:19

Ohgodwhy

50.8k11 gold badges86 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

matt Over a year ago

is there any chance you could explain more about the fat arrow and why it changes this.

Ohgodwhy Over a year ago

@matt The lexical scope of this will be modified within the ready callback as jQuery provides the document as this instead. By using the fat arrow we change the lexical scope back to the bounding parent method's this which is the Vue component.

Collectives™ on Stack Overflow

data not updating when setting it in mounted document ready (VUEJS)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related