I want to use the HTML-Symbols ▲
and ▼
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 = "▲";
Advertisement
Answer
There are two ways to achieve this :
- Use
v-html
directive
new Vue({ el: '#app', data: { content: "▲" } })
<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 oftextContent
new Vue({ el: '#app', mounted() { this.$refs.myTag.innerHTML = "▲"; } })
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <p ref="myTag"></p> </div>