How to add html text after a v-bind directive on a placeholder element in Vue.Js?

Question

I am using Vue.Js here. Safari is currently automatically adding "edit" as a placeholder to all input and textarea elements. I have looked online and haven't found a way to remove that "Edit" word. So this:

<input autocomplete='off' type="text" ref="inputPlaceholderUser" v-bind:placeholder='user.name'>

is actually writing this:

John Doeedit instead of just John Doe .

1. would you know how to remove that EDIT word? If so the next question is irrelevant

2. How should I write a javascript expression to add a space after the "user.name" so I can have at least something like John Doe edit instead of John Doeedit ?

I have tried to add two different quotation marks as described here :

<input autocomplete='off' type="text" ref="inputPlaceholderUser" v-bind:placeholder="'user.name' + ' '"> 

but this writes:

user.name edit

any thoughts?

Answer 1

I don't have access to Safari but did you try adding an empty placeholder ? Before the v-bind .

<input autocomplete='off' type="text" ref="inputPlaceholderUser" placeholder="" v-bind:placeholder='user.name'>