String concatenation in value bind in Vue

Question

I have just started learning Vue, so it might be silly question. I have created a Vue component and want to do string concatenation in value bind.

Like this.

Vue.component('button-counter',{
    data:function(){
        return { count : 0}
    },
    template:"<input type='button' v-on:click='count++' v-bind:value='"Total Counter :"+count'/>"
})

But it's seems to be wrong syntax. Can anyone please help me on how I can achieve this.

In example there is another way of doing this, e.g:

template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

But is it possible to achieve using value binding?

skirtle · Accepted Answer · 2018-09-22 05:13:57Z

6

As has already been noted in another answer you could use a computed property to remove the expression entirely but that is not required to get your code to work. If you had been using a single file component then your template would have worked fine. The 'wrong syntax' here is a consequence of using a double-quoted string literal for your template, leading to nested double quotes.

The double quotes need escaping with slashes. This is nothing to do with Vue, it's raw JavaScript:

template:"<input type='button' v-on:click='count++' v-bind:value='\"Total Counter :\"+count'/>"

While not incorrect, I would also suggest abbreviating v-on:click to @click and v-bind:value to :value.

template: "<input type='button' @click='count++' :value='\"Total Counter :\" + count'/>"

answered Sep 22, 2018 at 5:13

skirtle

29.3k4 gold badges49 silver badges63 bronze badges

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

Comments

Bilal · Accepted Answer · 2023-01-24 19:07:31Z

3

I would do this with a computed property. I would also probably swap this up from an input type to a button, but here is how to solve with current input.

new Vue(({
  el: "#app",
  data:function(){
    return { count : 0}
  },
  computed: {
    buttonText() {
      return "Total Counter : " + this.count; 
    }
  }, 
  template:"<input type='button' v-on:click='count++' v-bind:value='buttonText'/>"
}))

<script src="https://unpkg.com/vue@2"></script>
<html>
<div id="app"/>

edited Jan 24, 2023 at 19:07

Bilal

4,1256 gold badges33 silver badges70 bronze badges

answered Sep 22, 2018 at 4:52

Austio

6,0951 gold badge23 silver badges35 bronze badges

2 Comments

Kick Buttowski Over a year ago

why computed property?

Austio Over a year ago

Stylistic, either is fine, i prefer to keep my text together like this as a single concept, future me prefers to grok "buttonText" instead of parsing the button html to see that it is some variable text.

Paulius Nyoumi · Accepted Answer · 2020-02-05 18:43:21Z

1

you just have to escape the double quotes, this is because your template is surrounded by them.

    template:"<input type='button' v-on:click='count++' v-bind:value='\"Total Counter :\"+count'/>"

if it was in a template like this you don't have to escape.

    <template>
      <div>
        <input type='button' v-on:click='count++' v-bind:value="'Total Counter :'+count"/>
      </div>
    </template>

answered Feb 5, 2020 at 18:43

Paulius Nyoumi

2092 silver badges12 bronze badges

Comments

Shahbaz Ahmad · Accepted Answer · 2022-08-30 11:09:18Z

1

Good this works for me

<template>
  <div>
    <input type='button' v-on:click='count++' v-bind:value="'Total Counter :'+count"/>
  </div>
</template>

answered Aug 30, 2022 at 11:09

Shahbaz Ahmad

111 bronze badge

Collectives™ on Stack Overflow

String concatenation in value bind in Vue

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related