Level 104
v-html expects a String; not an expression; besides, why would you expect the first 100 characters of an arbitrary HTML content to be valid HTML at all?
What problem are you actually trying to solve?
Jul 5, 2022
4
Level 2
How to use v-html with substring
Hello.
How can I use v-html with substring function? I want to limit for example a description but if I use
v-html="text.substring(0,100)"
That substring will limit the html characters and the description will not appear. How can I use v-html and at the same time limit the text?
Level 2
@tykus When I try to retrieve the strings with .substring, it retrieves the html code and strings. For example, if I leave 0.100 -> it will only take over some of the words from the description Looks like https://gyazo.com/a05adbc09cfe29db2496f97a29377fe8 with v-html without substring With substring https://gyazo.com/fc0e91637e46524384a0c3d3c878bd45
Level 104
@KikoLdasd my point is (i) v-html takes a String and (ii) you cannot guarantee that the first 100 characters are valid HTML - if you only have text content then use v-text directive instead, and pass to it a computed property which gets the first 100 characters.
Level 50
Like such simply extract just the text: https://stackoverflow.com/a/28900362/6453292
function extractContent(html) {
return new DOMParser()
.parseFromString(html, "text/html")
.documentElement.textContent;
}
But, instead of using the extractContent function each time inside v-html. I would suggest to store summary of your html content in excerpt column in the database table, when creating or editing. Then, load the excerpt directly where needed.
Please or to participate in this conversation.