Vue js Placeholder concat

Hi to everyone
I have to manage some code. Basically I need to concatenate a string with a property value .
This is how my code works

<input
:class="[{‘is-invalid’: errors.has(formProperty._id)}, 'form-control
// the output is the same like , printing lines as html. in other hands , it’s should be print
//something like —> Insert [[value]] taken as followed below from a paramter

Issue

:placeholder=" ’ Insert ’ [[formProperty.name]]"

                        style="margin-top:10px;height:70%;width:75%; border-radius: .25rem;border: 1px solid #AAAAAA;"
                        :name="formProperty._id"
                        :data-vv-as="formProperty.name"
                        :placeholder=placeholder()
                        data-vv-validate-on="none"
                        type="text"
                        v-model="formData[formProperty._id]"
                        v-validate="addValidationProps(formProperty)">
                    <ValidationError :validatorErrors="errors" :fieldName="formProperty._id"></ValidationError>

how do i solve this kind of issue ?

I am not sure if I understood what you ment.
Maybe like this? Template string?

:placeholder="Insert ${formProperty.name}"

But I still don’t get, what the heck you are trying. Your example is very confusing.

Hi thanks to your reply.
I tried what you suggested and unfortunately is not working.

so, this is the issue.
//there is a v-for looping throw variables

// for each variables fill in the placeholder section formProperty. name // loop generate each input field as following
<input
                        :class="[{'is-invalid': errors.has(formProperty._id)}, 'form-control
                        :placeholder=" :placeholder="Insert ${formProperty.name}"
                        style="margin-top:10px;height:70%;width:75%; border-radius: .25rem;border: 1px solid #AAAAAA;"
                        :name="formProperty._id"
                        :data-vv-as="formProperty.name"
                        :placeholder=placeholder()
                        data-vv-validate-on="none"
                        type="text"
                        v-model="formData[formProperty._id]"
                        v-validate="addValidationProps(formProperty)">
                    <ValidationError :validatorErrors="errors" :fieldName="formProperty._id"></ValidationError>
                </div>

// as you can see i need to create a placeholder , who takes name of variable and concat before it. thanks in advance

:placeholder="`Insert ${formProperty.name} `"

There was an error in the code because of the ` char. This accent thing. Its an ES6 feature and it’s called template string.

See here: https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/template_strings

i tried and it’s still not working

You just want to have something like

“Insert fore name”
“Insert last name”
“Insert something”

in the placeholder attribute right?

exactly :star_struck:

Then this should work IF you have ES6 enabled. If not, you should try to get familiar with vue-cli 3 and ES6.

Anyway, this is the native js example:

:placeholder="'Insert ' + formProperty.name"

Explanation:
in vue, regular attributes are handled like strings. Example:
<input type="text" placeholder="something"/>
Something will be handled as regular text.

BUT every thing starting with a colon : or v- will be handled as a code statement. So in this example something will be handled as a variable name and not a string:
<input type="text" :placeholder="something"/>

Thats why you can do concatination there. If you would want to set a string in the example before, it had to look like this:
<input type="text" :placeholder="'something'"/>

And if you want to concatinate something like this:
<input type="text" :placeholder="'something' + somevariable"/>

1 Like