CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-component
Augusto
Augusto

Reputation: 4233

How to concatenate text with variable value on VueJS component property?

Using Vue Material components I want concatenate a text with a variable's value to make the md-content text.

<md-dialog-confirm
  :md-active.sync="showDialogConfirmDelete"
  md-title="Deletar Fornecedor"
  md-content="Concate this with {{fornecedorToDelete.nome}}"
></md-dialog-confirm>

...

data() {
   return { fornecedorToDelete: {nome: "Name"} }
}

but it doesn't works, the md-content's value is not set.

Upvotes: 1

Views: 1848

Answers (2)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

You could bind md-content to a concatenated string with the data property as follows:

 :md-content="Concate this with+'fornecedorToDelete.nome'"

Upvotes: 1

Ohgodwhy
Ohgodwhy

Reputation: 50767

Use a computed property:

:md-content="mdContent"

Then define mdContent in your computed property:

computed: {
  mdContent: {
    get: function() {
      return `Concate this with ${this.fornecedorToDelete.nome}`
    }
  }
}

Or you can (ew) do it the dirty way:

:md-content="`Concate this with ${fornecedorToDelete.nome}`"

Upvotes: 3

Related Questions