I have a textarea with a v-model named content. If I input some text there, it will be assigned to content.description. Now, I want to pass this to another element, namely to a div, but - here comes the tricky part - if my textarea contains some html-code, I want this html code to be interpreted as an html-code and not as a text.
For example, if I input
Some link
and I pass it to the div, I want it to be rendered as a clickable link, like
some link
and not as
Some link
Is there any way to do it?
We have to use v-html directive inorder to work. Take a look at the documentation Here, check the working snippet.
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
.as-console-wrapper{
display:none!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.12/vue.js"></script>
<div id="app-6">
<p v-html="message"></p>
<textarea v-model="message"></textarea>
</div>
You could use Vue v-html directive to insert Html in div.
Working example:
new Vue({
el: '#app',
data: {
html: 'Some link '
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<textarea v-model="html"></textarea>
<div v-html="html"></div>
</div>
Related
I wrote a Chromium extension using clear JavaScript to interact with the DOM, but now I study VueJS and rewrote the extension to use Vue. I found one problem: there is one <input> element connected to Vue.
I change its value via the bg.cp property of the Vue instance, and now I need to select the DOM element. Is there any way to make text selection using the Vue instance instead of using document.getElementById('test').select()?
The final goal is to copy the <input> field to clipboard.
<body>
<div id="appBg">
<input v-model="cp" id="test">
</div>
<script>
//vue instance of div with input field
var bg = new Vue({
el: "#appBg",
data: {
cp: ""
}
});
</script>
</body>
you can use ref in DOM attribute and call it by $refs in js section
EX:
<input ref="inputName" />
and in js section call
this.$refs.inputName
here you can read explanation of it
In my Polymer page I get a text from db in a variable and the text contains HTML tags. How can I change this text to HTML formated? The text I get is something like following:
<h1>Header</h1>
<p>More text......</p>
Read more
I display it in my page like the following, where item.content has the above text:
<div>
<p>${item.content}</p>
</div>
You can use unsafeHTML function from lit-html lib. See API reference here.
Example:
import { unsafeHTML } from 'lit-html/directives/unsafe-html.js'
...
_render ({ yourHtmlString }) {
return html`
${unsafeHTML(yourHtmlString)}
`
}
Live demo on stackblitz.
Let's say I have a paragraph with some text that I get from some database:
<p>
{{ text }}
</p>
However, this text may contain some references to other pages in my aplication:
Sample text [reference] sample text
So I would like these references to get turned into links to said pages:
<p>
Sample text reference sample text
</p>
I tried using the replace function in the script like this:
text.replace(/\[(.+)\]/,"<a href='/path/to/$1'>$1</a>");
But the characters all get escaped resulting in the anchor html code getting shown on the page.
Is there a way to stop the characters from being escaped, or even another way to turn [references] in the middle of the text into working links to another page?
If you don't want your HTML to be escaped, use the v-html directive.
From the docs:
The double mustaches interprets the data as plain text, not HTML. In
order to output real HTML, you will need to use the v-html directive:
Example:
var app = new Vue({
el: "#app",
data: function() {
return {
text: "See defect <a href='#'>#12345</a> for details"
};
}
});
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.13/dist/vue.min.js"></script>
<div id="app">
<p>{{text}}</p>
<p v-html="text"></p>
</div>
I am currently working on a component that looks like this:
<pre v-highlightjs>
<code>
<slot></slot>
</code>
</pre>
So the problem I have is that when I am writing html inside the slot, this html is rendered and not shown as a string or code-sample in my case. I have tested it with escaped < and > and it works. How can I access the html inside the slot and escape it automatically?
Thank you
EDIT:
I use highlight.js for that component to highlight the code inside my component. highlight.js can highlight html aswell. When I put e.g.
<html><head></head><body></body></html>
inside my slot, the box is shown, but the input is rendered as html. So I want to escape the html-Tags (and other code-snippets) so that it is shown and ofc highlighted. Hope that specifies my problem a bit more.
An important limitation to be aware of is that your HTML is not HTML, it is input to Vue's templating engine, so what a component sees in the slot may not be exactly what is in the HTML file.
Writing a directive to take HTML content and replace it with a text version of that content is pretty straightforward. Putting that in a component is also pretty straightforward. You can see these together in the snippet below.
What you will also see is that the Vue templating engine strips out tags that shouldn't be inside the body: the html, head, and body tags don't make it to the component. Their contents, if any, remain.
If it is important to be able to use those tags (or, for that matter, possibly invalid HTML), you will not be able to do it in a slot. You will need to have the HTML as a data string, which you can easily interpolate using the normal curlies.
new Vue({
el: '#app',
data: {
headContent: 'Something in the head'
},
components: {
htmlEscaper: {
template: '#html-escaper',
directives: {
escapeContent: {
bind(el) {
const html = el.innerHTML;
el.textContent = html;
}
}
}
}
}
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
<html-escaper>
<html>
<head>
{{ headContent }}
</head>
<some-junk>
Custom tags are ok
</some-junk>
<body>
<div>This part is legit</div>
</body>
</html>
</html-escaper>
</div>
<template id="html-escaper">
<code v-escape-content>
<slot>
</slot>
</code>
</template>
I use Vue.js in most of my (amateur) frontend development and I am stuck with a simple case I cannot understand.
In the code below, the content of the search box (an <input>) is transformed into an Array, which is then iterated against to create some links (<a>):
var vm = new Vue({
el: "#search",
data: {
search: '',
results: []
},
watch: {
search: function() {
this.results = this.search.split('')
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>
<h2>a dropdown</h2>
<div class="dropdown" id="search">
<input type="text" v-model="search">
<div id="myDropdown" class="dropdown-content">
<a :href="#e" v-for="e in results">{{e}}</a>
</div>
</div>
Why isn't the <input> displayed?
Note 1: When inspecting the code in Chrome, I see
<h2>a dropdown</h2>
<!---->
and such a comment is usually a sign that Vue.js has explicitly not rendered something.
Note 2: When refreshing the page, I see a very brief glimpse of the input field, so it is rendered, then hidden by (I assume) Vue.js.
If you properly bind the href attribute like :href="'#' + e" it works. Vue.js somehow seems to get confused by that otherwise.