binding multiple properties to a textfield label in Vuetify

Question

I want to bind a string containing multiple values to a textfield in vuetify. I wrote the following code but it gives me the properties as string.

<div v-if="textField">
      <v-text-field
      :value="'Our client, {{this.name}}, is {{this.age}} years old.'"
      outline
      readonly
      >
</v-text-field>
</div>

The output is:

Our client, {{this.name}}, is {{this.age}} years old.

Eventhough I want to get this.name and this.age values that are John and 32 something like this:

Our client, John, is 32 years old.

What's the best way to do it?

score 5 · Accepted Answer · edited Jul 15 '22 at 20:55

5

Or use template literals directly in the template as:

<v-text-field
  :value="`Our client, ${name}, is ${age} years old.`"
  outline
  readonly
  >

Also notice Mustaches cannot be used inside HTML attributes. That is, {{}} won't work for attributes.

edited Jul 15 '22 at 20:55

tony19

125,647
18
229
307

answered Oct 09 '18 at 20:08

Psidom

209,562
33
339
356

I still receive the string `Our client, ${this.name}, is ${this.age} years old.` as the result. – mha Oct 09 '18 at 20:20
2

Are you using backticks ` around the string? Notice it's not a single quote. – Psidom Oct 09 '18 at 20:22

Stephen Gilboy · Answer 2 · 2018-10-09T20:29:12.540

2

Use a computed field.

{
  computed: {
    textFieldMsg() {
     return `Our client, ${this.name}, is ${this.age} years old.`;
  },
}

HTML

<v-text-field
  :value="textFieldMsg"
  outline
  readonly
  >

Also, depending on what you're trying to do with the text field will determine which solution is best for you. Are the values of this.name and this.age changing depending on other input fields? Is this just static content for the life of the page? Etc...

edited Oct 09 '18 at 20:29

answered Oct 09 '18 at 20:06

Stephen Gilboy

5,572
2
30
36

I still receive the string `Our client, ${this.name}, is ${this.age} years old.` as the result – mha Oct 09 '18 at 20:19
Then there must be something else going on in your code. Hard to debug without seeing the javascript. – Stephen Gilboy Oct 09 '18 at 20:24
Was using single quote instead of backticks, thanks buddy :) – mha Oct 09 '18 at 21:07

binding multiple properties to a textfield label in Vuetify

2 Answers2