Vuejs v-model escape automatically html entities
I'm trying to display some html entities in a form text input, but v-model seems escaping them.
Is there something I need to write to make v-model displaying correctly html entities?
my sample code is
<el-input v-model="data" readonly="readonly"></el-input>
I know about v-html but I prefer keep using v-model due the automatic two-way binding.
UPDATE
Maybe I expressed myself wrong, I want to display the character, not the html entity, so instead 49.42₹ i need to display 49.42₹.
forms vue.js input html-entities v-model
asked Nov 13 '18 at 13:41
fudofudo
5510
add a comment |
I'm trying to display some html entities in a form text input, but v-model seems escaping them.
Is there something I need to write to make v-model displaying correctly html entities?
my sample code is
<el-input v-model="data" readonly="readonly"></el-input>
I know about v-html but I prefer keep using v-model due the automatic two-way binding.
UPDATE
Maybe I expressed myself wrong, I want to display the character, not the html entity, so instead 49.42₹ i need to display 49.42₹.
forms vue.js input html-entities v-model
asked Nov 13 '18 at 13:41
fudofudo
5510
Take a look at this stackoverflow.com/questions/44376484/…
– Badgy
Nov 13 '18 at 13:50
And what doesdatacontain? This fiddle seems to handle HTML just fine in anel-input.
– Roy J
Nov 13 '18 at 14:30
@Badgy the user there "falled back" to manually write two-way data binding withv-html, if possible I would like to keepv-modelto not writing any method myself to do this
– fudo
Nov 13 '18 at 14:45
@RoyJdatacontains a monetized value, i.e.: number followed by currency symbol expressed with html entity
– fudo
Nov 13 '18 at 14:46
You want to interpret the HTML entity in a text input field? Do you expect to be able to reverse-translate from currency symbol to entity notation?
– Roy J
Nov 14 '18 at 0:35
add a comment |
I'm trying to display some html entities in a form text input, but v-model seems escaping them.
Is there something I need to write to make v-model displaying correctly html entities?
my sample code is
<el-input v-model="data" readonly="readonly"></el-input>
I know about v-html but I prefer keep using v-model due the automatic two-way binding.
UPDATE
Maybe I expressed myself wrong, I want to display the character, not the html entity, so instead 49.42₹ i need to display 49.42₹.
forms vue.js input html-entities v-model
asked Nov 13 '18 at 13:41
fudofudo
5510
I'm trying to display some html entities in a form text input, but v-model seems escaping them.
Is there something I need to write to make v-model displaying correctly html entities?
my sample code is
<el-input v-model="data" readonly="readonly"></el-input>
I know about v-html but I prefer keep using v-model due the automatic two-way binding.
UPDATE
Maybe I expressed myself wrong, I want to display the character, not the html entity, so instead 49.42₹ i need to display 49.42₹.
forms vue.js input html-entities v-model
forms vue.js input html-entities v-model
asked Nov 13 '18 at 13:41
fudofudo
5510
asked Nov 13 '18 at 13:41
fudofudo
5510
edited Nov 13 '18 at 14:43
fudo
asked Nov 13 '18 at 13:41
fudofudo
5510
asked Nov 13 '18 at 13:41
fudofudo
5510
asked Nov 13 '18 at 13:41
fudofudo
5510
5510
Take a look at this stackoverflow.com/questions/44376484/…
– Badgy
Nov 13 '18 at 13:50
And what doesdatacontain? This fiddle seems to handle HTML just fine in anel-input.
– Roy J
Nov 13 '18 at 14:30
@Badgy the user there "falled back" to manually write two-way data binding withv-html, if possible I would like to keepv-modelto not writing any method myself to do this
– fudo
Nov 13 '18 at 14:45
@RoyJdatacontains a monetized value, i.e.: number followed by currency symbol expressed with html entity
– fudo
Nov 13 '18 at 14:46
You want to interpret the HTML entity in a text input field? Do you expect to be able to reverse-translate from currency symbol to entity notation?
– Roy J
Nov 14 '18 at 0:35
add a comment |
Take a look at this stackoverflow.com/questions/44376484/…
– Badgy
Nov 13 '18 at 13:50
And what doesdatacontain? This fiddle seems to handle HTML just fine in anel-input.
– Roy J
Nov 13 '18 at 14:30
@Badgy the user there "falled back" to manually write two-way data binding withv-html, if possible I would like to keepv-modelto not writing any method myself to do this
– fudo
Nov 13 '18 at 14:45
@RoyJdatacontains a monetized value, i.e.: number followed by currency symbol expressed with html entity
– fudo
Nov 13 '18 at 14:46
You want to interpret the HTML entity in a text input field? Do you expect to be able to reverse-translate from currency symbol to entity notation?
– Roy J
Nov 14 '18 at 0:35
Take a look at this stackoverflow.com/questions/44376484/…
– Badgy
Nov 13 '18 at 13:50
Take a look at this stackoverflow.com/questions/44376484/…
– Badgy
Nov 13 '18 at 13:50
And what does
data contain? This fiddle seems to handle HTML just fine in an el-input.– Roy J
Nov 13 '18 at 14:30
And what does
data contain? This fiddle seems to handle HTML just fine in an el-input.– Roy J
Nov 13 '18 at 14:30
@Badgy the user there "falled back" to manually write two-way data binding with
v-html, if possible I would like to keep v-model to not writing any method myself to do this– fudo
Nov 13 '18 at 14:45
@Badgy the user there "falled back" to manually write two-way data binding with
v-html, if possible I would like to keep v-model to not writing any method myself to do this– fudo
Nov 13 '18 at 14:45
@RoyJ
data contains a monetized value, i.e.: number followed by currency symbol expressed with html entity– fudo
Nov 13 '18 at 14:46
@RoyJ
data contains a monetized value, i.e.: number followed by currency symbol expressed with html entity– fudo
Nov 13 '18 at 14:46
You want to interpret the HTML entity in a text input field? Do you expect to be able to reverse-translate from currency symbol to entity notation?
– Roy J
Nov 14 '18 at 0:35
You want to interpret the HTML entity in a text input field? Do you expect to be able to reverse-translate from currency symbol to entity notation?
– Roy J
Nov 14 '18 at 0:35
add a comment |
1 Answer
1
active
oldest
votes
If you v-model a computed that interprets HTML entities, I think you get the effect you want. You can type in entity values and it will interpret them correctly. However, it might prematurely turn  into a different character; you have to type #8377; and then go back in and insert the &.
new Vue({
el: '#app',
data: {
a: '49.42₹'
},
computed: {
asText: {
get() {
return this.toText(this.a);
},
set(newValue) {
this.a = newValue;
}
}
},
methods: {
toText(html) {
const div = document.createElement('div');
div.innerHTML = html;
return div.textContent;
}
}
})<link href="//unpkg.com/element-ui@1.0.0-rc.3/lib/theme-default/index.css" rel="stylesheet"/>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
<el-input v-model="asText"></el-input>
{{a}}
<div v-html="a"></div>
</div>answered Nov 14 '18 at 0:46
Roy JRoy J
26.7k33158
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53282349%2fvuejs-v-model-escape-automatically-html-entities%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
If you v-model a computed that interprets HTML entities, I think you get the effect you want. You can type in entity values and it will interpret them correctly. However, it might prematurely turn  into a different character; you have to type #8377; and then go back in and insert the &.
new Vue({
el: '#app',
data: {
a: '49.42₹'
},
computed: {
asText: {
get() {
return this.toText(this.a);
},
set(newValue) {
this.a = newValue;
}
}
},
methods: {
toText(html) {
const div = document.createElement('div');
div.innerHTML = html;
return div.textContent;
}
}
})<link href="//unpkg.com/element-ui@1.0.0-rc.3/lib/theme-default/index.css" rel="stylesheet"/>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
<el-input v-model="asText"></el-input>
{{a}}
<div v-html="a"></div>
</div>answered Nov 14 '18 at 0:46
Roy JRoy J
26.7k33158
add a comment |
If you v-model a computed that interprets HTML entities, I think you get the effect you want. You can type in entity values and it will interpret them correctly. However, it might prematurely turn  into a different character; you have to type #8377; and then go back in and insert the &.
new Vue({
el: '#app',
data: {
a: '49.42₹'
},
computed: {
asText: {
get() {
return this.toText(this.a);
},
set(newValue) {
this.a = newValue;
}
}
},
methods: {
toText(html) {
const div = document.createElement('div');
div.innerHTML = html;
return div.textContent;
}
}
})<link href="//unpkg.com/element-ui@1.0.0-rc.3/lib/theme-default/index.css" rel="stylesheet"/>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
<el-input v-model="asText"></el-input>
{{a}}
<div v-html="a"></div>
</div>answered Nov 14 '18 at 0:46
Roy JRoy J
26.7k33158
add a comment |
If you v-model a computed that interprets HTML entities, I think you get the effect you want. You can type in entity values and it will interpret them correctly. However, it might prematurely turn  into a different character; you have to type #8377; and then go back in and insert the &.
new Vue({
el: '#app',
data: {
a: '49.42₹'
},
computed: {
asText: {
get() {
return this.toText(this.a);
},
set(newValue) {
this.a = newValue;
}
}
},
methods: {
toText(html) {
const div = document.createElement('div');
div.innerHTML = html;
return div.textContent;
}
}
})<link href="//unpkg.com/element-ui@1.0.0-rc.3/lib/theme-default/index.css" rel="stylesheet"/>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
<el-input v-model="asText"></el-input>
{{a}}
<div v-html="a"></div>
</div>answered Nov 14 '18 at 0:46
Roy JRoy J
26.7k33158
If you v-model a computed that interprets HTML entities, I think you get the effect you want. You can type in entity values and it will interpret them correctly. However, it might prematurely turn  into a different character; you have to type #8377; and then go back in and insert the &.
new Vue({
el: '#app',
data: {
a: '49.42₹'
},
computed: {
asText: {
get() {
return this.toText(this.a);
},
set(newValue) {
this.a = newValue;
}
}
},
methods: {
toText(html) {
const div = document.createElement('div');
div.innerHTML = html;
return div.textContent;
}
}
})<link href="//unpkg.com/element-ui@1.0.0-rc.3/lib/theme-default/index.css" rel="stylesheet"/>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
<el-input v-model="asText"></el-input>
{{a}}
<div v-html="a"></div>
</div>new Vue({
el: '#app',
data: {
a: '49.42₹'
},
computed: {
asText: {
get() {
return this.toText(this.a);
},
set(newValue) {
this.a = newValue;
}
}
},
methods: {
toText(html) {
const div = document.createElement('div');
div.innerHTML = html;
return div.textContent;
}
}
})<link href="//unpkg.com/element-ui@1.0.0-rc.3/lib/theme-default/index.css" rel="stylesheet"/>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
<el-input v-model="asText"></el-input>
{{a}}
<div v-html="a"></div>
</div>new Vue({
el: '#app',
data: {
a: '49.42₹'
},
computed: {
asText: {
get() {
return this.toText(this.a);
},
set(newValue) {
this.a = newValue;
}
}
},
methods: {
toText(html) {
const div = document.createElement('div');
div.innerHTML = html;
return div.textContent;
}
}
})<link href="//unpkg.com/element-ui@1.0.0-rc.3/lib/theme-default/index.css" rel="stylesheet"/>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
<el-input v-model="asText"></el-input>
{{a}}
<div v-html="a"></div>
</div>answered Nov 14 '18 at 0:46
Roy JRoy J
26.7k33158
answered Nov 14 '18 at 0:46
Roy JRoy J
26.7k33158
answered Nov 14 '18 at 0:46
Roy JRoy J
26.7k33158
answered Nov 14 '18 at 0:46
Roy JRoy J
26.7k33158
26.7k33158
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53282349%2fvuejs-v-model-escape-automatically-html-entities%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Take a look at this stackoverflow.com/questions/44376484/…
– Badgy
Nov 13 '18 at 13:50
And what does
datacontain? This fiddle seems to handle HTML just fine in anel-input.– Roy J
Nov 13 '18 at 14:30
@Badgy the user there "falled back" to manually write two-way data binding with
v-html, if possible I would like to keepv-modelto not writing any method myself to do this– fudo
Nov 13 '18 at 14:45
@RoyJ
datacontains a monetized value, i.e.: number followed by currency symbol expressed with html entity– fudo
Nov 13 '18 at 14:46
You want to interpret the HTML entity in a text input field? Do you expect to be able to reverse-translate from currency symbol to entity notation?
– Roy J
Nov 14 '18 at 0:35