In my case, I am replacing a link on top of paragraph element using v-html
Please find the code snippet as follows
<p v-html="websiteHTML"></p>
where websiteHTML contains: <a v-bind:href="google.com/">Google</a>
The <p> tag is being rendered with Google but doesn't have hyperlink to navigate to https://www.google.com/
Could you please help in finding the error?
The HTML string you include in your variable should just be HTML, not Vue template code. When you tried including vue template directives, the framework wrote the anchor tag into the DOM with the literal attribute "v-bind:href" instead of the desired "href":
new Vue({
el: '#app',
data: {
websiteHTMLNo: '<a v-bind:href="https://google.com/">Google</a>', // <-- won't work
websiteHTMLYes: 'Google' // <-- do this instead
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<p v-html="websiteHTMLNo"></p>
<p v-html="websiteHTMLYes"></p>
</div>
(If you actually do need to inject template code instead of plain HTML, you need to use Vue.compile instead of v-html to parse it.)
if you want to pass a var inside your link.
const url: string = 'https://google.fr/'
const html: string = `Google`
<p v-html="html"></p>
Related
I'm facing issue with the below directive, it is working with any tag except the template tag
Vue.directive('count',{
bind(el,b,v){
console.log(b.value);
},
inserted(el,b,v){
console.log(b.value);
},
update(el,b,v){
console.log(b.value);
}
});
new Vue({
el: "#app" ,
data:{
value:0
}
})
<div id="app">
<button #click="value+=1">
inc value
</button>
<template v-count="value">
</template>
<!-- <div v-count="value">
</div> -->
</div>
If the comment on the div is removed, the directive logs the value, but with the template tag directive's hooks are not triggered
Here jsfiddle for the issue
Thanks
The template tag doesn't actually mount anything on its own, so it has no place in the DOM and doesn't bind. In your case, an easy solution is to just put v-count="value" on the button tag. If there is a more specialized need for this directive and you're just giving us placeholder code, putting it on a SPAN or DIV will make more sense than a template anyway.
I am facing a very interesting problem. I am returning some html from server as json. My return html string look like this
str2: " <span class="card_top_com_span link_color" ><router-link to="/profile/sadek3/about">numan sir</router-link> </span></span>, <span class="card_top_com_span link_color" ><router-link to="/profile/sadek3/about">sadek mia</router-link> </span> and 4 of your firiends commented on this post"
This is returned from server. Now I want to add some spa link.
It can be nuxt link, #click event for routing or a </router-link>
I am using v-html in my front end to out put html. It does output correctly.
Is there anyways of doing this?
Thank you.
As said in the comments, it's way better to respond from your server with structured JSON data. However, you can make it work, but you need to use a <component></component>. Just using v-html won't work if you have router-link:
<div id="app">
<component :is="{template: theString}"></component>
</div>
new Vue({
el: '#app',
data: {
theString: '<h3>Something Cool</h3>'
}
})
https://jsfiddle.net/to8smxfb/
PS: You also need to make sure that theString only contains one root element. You can wrap your string into <div></div> for example.
I'm very new to Vuejs.
I see how to pass data (variables) into components, but in my code I need to get thoses variables in the HTML attributes of the template.
Here my HTML :
<div id="activities" class="row text-center activities">
<myimage text="{{ art_text }}" type="art"></myimage>
</div>
Here my Vuejs code (delimiters changed, because of Twig) :
<script type="text/javascript" src="{{ asset('js/vue.js') }}"></script>
<script type="text/javascript">
Vue.component('myimage', {
delimiters: ['${', '}'],
props: ['text', 'type'],
template: '<div class="col-lg-3 col-md-3" style="padding-top: 20px;"><h3><a title="${text}" href="#"><span> <img style="width:220px;" alt="Image ${type}"> </span></a></h3><span>${text}</span></div>'
});
new Vue({
el: '#activities'
});
</script>
But for example, in my template I don't see why "title" attribute don't get the variable ${text} ...
Is there another way to pass data from custom element to HTML attributes of the template ?
The problem is:
Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead.
Also, per docs:
Mustaches cannot be used inside HTML attributes. Instead, use a v-bind directive.
So, instead of title="${text}" (which is, because you are using custom delimiters, the equivalent of title="{{ text }}"),
Use:
v-bind:title="text"
Or v-bind's shorthand:
:title="text"
I am trying to develop a SPA. In this regard I am using vue.js 2 in front end and Laravel 5.5 API in back end. Now I would like to display images in front end. I wrote below code in HTML
<img :src="/images/addressObj.image"/>
Where should I put images in Laravel and how can I access that image in vue.js ?
the issue here it's that you are not using properly the :src attr, :src spects a string as value, don't let the double quotes confuse you, between the double quotes you have to place your formatted string, notice that if use :src="www.google.com/size" the img will try to find the url www.google.com/size instead www.google.com/350x150 or if you try www.google.com/{{size}} the img will try to find www.google.com/%7B%/Bsize%7D%7D (size it's a var that comes from the example below)
new Vue({
el: '#app',
data() {
return {
size: '350x150',
size2: '350x400'
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
<button #click="size = '350x150'">Size 350x150</button>
<button #click="size = '350x200'">Size 350x200</button>
<!-- notice the single quotes -->
<img :src="'http://via.placeholder.com/' + size" />
<hr />
<button #click="size2 = '350x400'">Size2 350x400</button>
<button #click="size2 = '350x300'">Size2 350x300</button>
<!-- here with string interpolation -->
<img :src="`http://via.placeholder.com/${size2}`" />
</div>
Assuming that is a .vue or .js file,
<img :src="`/images/${addressObj.image}`"/>
I assume that you have correctly done the necessary stuff for the variable addressObj.
well, as u have dynamic source binding, u have to require each image.
so u just should do like that:
<img :src='require(`./images/${addressObj.image}`)'>
So I'm just starting to play with Vue.js and I would like to know if there is a nice way to initialize the data object with html tags content from the page.
Basically I have a page that displays information and I would like to turn it into a tiny Vue application to avoid having a separated edit page.
So I added the form with 2 way binding which submits the values via ajax.
The thing is I really want to avoid Flash Of Uncompiled Content, but then I feel like I have to duplicate all my data, once in the html tag, once in the data object.
<div id="app">
<span v-text="prop1">This is filled by the backend</span>
<input v-model="prop1" type="text" v-cloak />
</div>
<script>
new Vue({
el: "#app",
data: {prop1: "This is filled by the backend..again"} // << Can I avoid this?
});
</script>
Could I tell Vue to get the data from the html tags since it's already there?
Thanks!
You are looking for props
Your html element would look something like
<custom-element dataToPass="dataFromHtml"></custom-element>.
Then you can access it in your vue instance via this.dataToPass.
Have a read through the documentation, there is a difference if you pass a string or an expression (from another vue instance for example).
In your example:
<div id="app">
<span prop1="{ backendVariable}" v-text="prop1"></span>
<input v-model="prop1" type="text" v-cloak />
</div>
<script>
new Vue({
el: "#app",
props: ['prop1']
});
</script>
```