Vuejs v-model escape automatically html entities
up vote
0
down vote
favorite
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 at 13:41
fudo
267
add a comment |
up vote
0
down vote
favorite
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 at 13:41
fudo
267
Take a look at this stackoverflow.com/questions/44376484/…
– Badgy
Nov 13 at 13:50
And what doesdatacontain? This fiddle seems to handle HTML just fine in anel-input.
– Roy J
Nov 13 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 at 14:45
@RoyJdatacontains a monetized value, i.e.: number followed by currency symbol expressed with html entity
– fudo
Nov 13 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 at 0:35
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
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 at 13:41
fudo
267
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 at 13:41
fudo
267
asked Nov 13 at 13:41
fudo
267
edited Nov 13 at 14:43
asked Nov 13 at 13:41
fudo
267
asked Nov 13 at 13:41
fudo
267
asked Nov 13 at 13:41
fudo
267
267
Take a look at this stackoverflow.com/questions/44376484/…
– Badgy
Nov 13 at 13:50
And what doesdatacontain? This fiddle seems to handle HTML just fine in anel-input.
– Roy J
Nov 13 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 at 14:45
@RoyJdatacontains a monetized value, i.e.: number followed by currency symbol expressed with html entity
– fudo
Nov 13 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 at 0:35
add a comment |
Take a look at this stackoverflow.com/questions/44376484/…
– Badgy
Nov 13 at 13:50
And what doesdatacontain? This fiddle seems to handle HTML just fine in anel-input.
– Roy J
Nov 13 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 at 14:45
@RoyJdatacontains a monetized value, i.e.: number followed by currency symbol expressed with html entity
– fudo
Nov 13 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 at 0:35
Take a look at this stackoverflow.com/questions/44376484/…
– Badgy
Nov 13 at 13:50
Take a look at this stackoverflow.com/questions/44376484/…
– Badgy
Nov 13 at 13:50
And what does
data contain? This fiddle seems to handle HTML just fine in an el-input.– Roy J
Nov 13 at 14:30
And what does
data contain? This fiddle seems to handle HTML just fine in an el-input.– Roy J
Nov 13 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 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 at 14:45
@RoyJ
data contains a monetized value, i.e.: number followed by currency symbol expressed with html entity– fudo
Nov 13 at 14:46
@RoyJ
data contains a monetized value, i.e.: number followed by currency symbol expressed with html entity– fudo
Nov 13 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 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 at 0:35
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
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 at 0:46
Roy J
25.1k32853
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
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 at 0:46
Roy J
25.1k32853
add a comment |
up vote
0
down vote
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 at 0:46
Roy J
25.1k32853
add a comment |
up vote
0
down vote
up vote
0
down vote
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 at 0:46
Roy J
25.1k32853
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 at 0:46
Roy J
25.1k32853
answered Nov 14 at 0:46
Roy J
25.1k32853
answered Nov 14 at 0:46
Roy J
25.1k32853
answered Nov 14 at 0:46
Roy J
25.1k32853
25.1k32853
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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 at 13:50
And what does
datacontain? This fiddle seems to handle HTML just fine in anel-input.– Roy J
Nov 13 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 at 14:45
@RoyJ
datacontains a monetized value, i.e.: number followed by currency symbol expressed with html entity– fudo
Nov 13 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 at 0:35