Variable passing in javascript is not coming in vue.js tags

Question

I have defined a variable with the name tn which has number 10. I am trying to pass tn (which has 10) in the v-on:click="add(tn)" but it does not work. Is it something I am missing.

<script>
    var tn = 10;
</script>
<div id="vue-app">
    <p>My age is {{age}}</p>
    <button v-on:click="add(1)"> Add a Year</button>
    <button v-on:click="subtract(1)"> Subtract a Year</button>
    <button v-on:click="add(tn)"> Add a Year</button>
    <button v-on:click="subtract(tn)"> Subtract a Year</button>
</div>

<script>
    new Vue({
        el: '#vue-app',
        data: {
            age: 25
        },
        methods: {
            add: function (inc) {
                this.age += inc;
            },
            subtract: function (dec) {
                this.age -= dec;
            }
        }
    })
</script>

I am not a Vue expert, but your tn variable seems to be outside of your Vue app. Could that be the issue? — ISAE
– ISAE, Commented Aug 7, 2019 at 17:30
@ISAE it does'nt matter even if its outside. That's a javascript variable and ideally I should access it. But for no reason I am unable to do so. — fear_matrix
– fear_matrix, Commented Aug 7, 2019 at 17:40
@fear_matrix it does matter. the vue template compiler will use a with(this) {} block around your template (see here). so if you write tn in your template, it will be interpreted as this.tn, same with window, which will become this.window — Turtlefight
– Turtlefight, Commented Aug 7, 2019 at 17:42

MH2K9 · Accepted Answer · 2019-08-07 17:46:28Z

3

In Vue template, the components or instance properties are accessible. When engine translate the template then the var tn you declared is not accessible.

Hence, you can add the tn var to the instance property like

data: {
  tn: 10,
  // ....
}

Alternatively you can use mixin to access global var in any Vue instance

Vue Mixing:

Vue.mixin({
   data: function() {
     return {
       get tn() {
          return 10;
       }
     }
  }
})

Now use in Vue Instance:

new Vue({
    el: '#app',
    created: function() {
        console.log(this.tn)
    }
});

And in template now tn might be accessible.

Working demo:

Vue.mixin({
    data: function() {
        return {
            get tn() {
                return 10;
            }
        }
    }
})

new Vue({
    el: '#vue-app',
    data: {
        age: 25
    },
    methods: {
        add: function (inc) {
            this.age += inc;
        },
        subtract: function (dec) {
            this.age -= dec;
        }
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
<div id="vue-app">
    <p>My age is {{age}}</p>
    <button v-on:click="add(1)"> Add a Year</button>
    <button v-on:click="subtract(1)"> Subtract a Year</button>
    <button v-on:click="add(tn)"> Add a Year</button>
    <button v-on:click="subtract(tn)"> Subtract a Year</button>
</div>

edited Aug 7, 2019 at 17:46

answered Aug 7, 2019 at 17:37

MH2K9

12.1k7 gold badges34 silver badges49 bronze badges

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

1 Comment

MH2K9 Over a year ago

Glad to help you :)

Turtlefight · Accepted Answer · 2019-08-07 17:58:06Z

1

You can't access global variables in vue templates, only variables defined on the vue component directly.
You need to either move tn into the components data, or use a computed property.

Example moving tn into data:

new Vue({
  el: '#vue-app',
  data: {
    age: 25,
    tn: 10
  },
  methods: {
    add: function(inc) {
      this.age += inc;
    },
    subtract: function(dec) {
      this.age -= dec;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="vue-app">
  <p>My age is {{age}}</p>
  <button v-on:click="add(1)"> Add a Year</button>
  <button v-on:click="subtract(1)"> Subtract a Year</button>
  <button v-on:click="add(tn)"> Add a Year</button>
  <button v-on:click="subtract(tn)"> Subtract a Year</button>
</div>

or with a computed property:

const tn = 10;

new Vue({
  el: '#vue-app',
  data: {
    age: 25
  },
  computed: {
    tn() {
      return tn;
    }
  },
  methods: {
    add: function(inc) {
      this.age += inc;
    },
    subtract: function(dec) {
      this.age -= dec;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="vue-app">
  <p>My age is {{age}}</p>
  <button v-on:click="add(1)"> Add a Year</button>
  <button v-on:click="subtract(1)"> Subtract a Year</button>
  <button v-on:click="add(tn)"> Add a Year</button>
  <button v-on:click="subtract(tn)"> Subtract a Year</button>
</div>

Please note though that your component will not update when you change the global tn variable with this computed property.

If you want to change tn dynamically and want the component to update automatically, you can take a look at vuex.

Edit:
If you need access to a global variable from multiple components, you could also assign it on the Vue.prototype:

const tn = 10;
Vue.prototype.$tn = tn;

new Vue({
  el: '#vue-app',
  data: {
    age: 25
  },
  methods: {
    add: function(inc) {
      this.age += inc;
    },
    subtract: function(dec) {
      this.age -= dec;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="vue-app">
  <p>My age is {{age}}</p>
  <button v-on:click="add(1)"> Add a Year</button>
  <button v-on:click="subtract(1)"> Subtract a Year</button>
  <button v-on:click="add($tn)"> Add a Year</button>
  <button v-on:click="subtract($tn)"> Subtract a Year</button>
</div>

edited Aug 7, 2019 at 17:58

answered Aug 7, 2019 at 17:28

Turtlefight

11.8k2 gold badges31 silver badges48 bronze badges

2 Comments

fear_matrix Over a year ago

my code logic is a bit different. I know that we can handle the variable in this manner which you have mentioned but I need to handle something which is a separate javascript snippet in which I have defined the variable as I did above. In a nutshell I have a separate javascript code in which I have to pass the variable in v-on:click.

Turtlefight Over a year ago

@fear_matrix the computed property should work in that case. (except if you want to dynamically change it, which will not work)

Collectives™ on Stack Overflow

Variable passing in javascript is not coming in vue.js tags

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related