[Vuejs]-Is there any way to pass parameters to a binded variable in Vue.JS with moustache syntax

by

0👍

I would simply use a method since variables are not being computed:

methods:{
   GREETING_MESSAGE_FROM_TO(variable_1, variable_2){
      return `Hello this message is for ${variable_1} from ${variable_2}`
   }
}

In your template :

<div>
  {{ GREETING_MESSAGE_FROM_TO(props1, props2) }}
</div>

If those variable are needed to be computed then choose computed instead of methods hook.

0👍

There are 3 ways:

data() {
  return {
      variable_1: 'Sam',
      variable_2: 'Alex',
      GREETING_MESSAGE_FROM_TO: `Hello this message is for ${this.variable_1} from ${this.variable_2}'
  }
}

or better solution:

data() {
  return {
      variable_1: 'Sam',
      variable_2: 'Alex'
  }
},
computed() {
      GREETING_MESSAGE_FROM_TO: `Hello this message is for ${this.variable_1} from ${this.variable_2}'
}

and

<div>
  {{ GREETING_MESSAGE_FROM_TO }}
</div>

note that when variable_1 or 2 changes, the greeting updates automatically.

but you can use methods too:

methods: {
      GREETING_MESSAGE_FROM_TO: function (variable_1, variable_2) {
          return `Hello this message is for ${variable_1} from ${variable_2}'
    }
}

with this usage

<div>
  {{ GREETING_MESSAGE_FROM_TO('Sam', 'Alex') }}
</div>

or reactive data as args.

Leave a comment