Use HTML entities in my <script> block in Vue.js

Question

I want to use the HTML-Symbols &#9650 and &#9660 that stand for "arrow up" and "arrow down" in the <script> section of my Vue.js component. I know that something simple as the following doesn't work. But I tried different functions that I found on the internet and nothing worked.

this.$refs["span-1"].textContent = "&#9650";

Thanks a lot. I can't believe I wasted so much time on this. — Petar Yakov
– Petar Yakov, Commented Sep 28, 2022 at 18:11
I assume you are trying to toggle this arrow at some point. You already got your answer, but if I may suggest: Do those with CSS instead of using $refs. Usually, it is not a good practice to modify the HTML that way. — Zarko
– Zarko, Commented Sep 28, 2022 at 22:42
Thank you for the answer. I could also do it with CSS. I want to change the content of the <span> with three different strings depending on what I click. What comes to my mind is that I need 3 different CSS classes to achieve that. Is there a simpler way? Is $refs a better choice here and why is it not a good practice in general? — Petar Yakov
– Petar Yakov, Commented Sep 29, 2022 at 8:08

Rohìt Jíndal · Accepted Answer · 2022-09-29 06:19:59Z

1

There are two ways to achieve this :

Use v-html directive

new Vue({
  el: '#app',
  data: {
    content: "&#9650"
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <p v-html="content"></p>
</div>

Use innerHTML instead of textContent

new Vue({
  el: '#app',
  mounted() {
    this.$refs.myTag.innerHTML = "&#9650";
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <p ref="myTag"></p>
</div>

answered Sep 29, 2022 at 6:19

Rohìt Jíndal

27.3k16 gold badges80 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Use HTML entities in my <script> block in Vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related