I am developing a Vuejs application in which I need to display the url for a company. I am displaying it like below:
<a :href="company.website">{{company.website}}</a>
and company.website holds the value www.companyname.com.
Whenever I click on the link, it opens with the localhost url appended like below:
http://localhost:2000/www.companyname.com
How to make it just open company url?
PS: I know that addinghttp or https to the url solves the issue. I would like to know if there is any other way to solve this issue.
use a url like this :
//www.companyname.com
var demo = new Vue({
el: '#demo',
data: {
url: "www.bing.com",
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="demo" v-cloak>
<a :href="url">url 1</a>
<a :href="'//' + url">url 2</a>
</div>
Related
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>
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.
Hello I have existing web app written in django and I want to add some vue js feautures.
I don't want to have all the pain with webpack, so I can stick to including vue.js as an external script like this:
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
as sugested here:
https://v2.vuejs.org/v2/guide/installation.html#ad
Also I have on my page this html:
<div id="app">
just an app
{{ message }}
</div>
And the following inline script:
<script type="text/javascript" >
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
But there is no message "Hello vue" on my page. As you can see on the printscreen
So what do I do?
I got the solution
it didn't work, cause django used the same braskets as vue.js
something like this {{variable}}
So I turned off django braskets:
like this:
{% verbatim %}
<div id="app">
just an app
{{ message }}
</div>
{% endverbatim %}
I have created two custom VueJS components and I would like to place them adjacent to one another like so:
<div id="app">
<x-component />
<y-component />
</div>
...
new Vue({
el: '#app',
components: {
'x-component': { template: '<div>component x</div>' },
'y-component': { template: '<div>component y</div>' }
}
});
When I do this, only the first component is rendered. Is this a bug in VueJS or am I doing something wrong? It seems like this should be possible.
When I change it as follows, it works:
<div id="app">
<div>
<x-component />
</div>
<div>
<y-component />
</div>
</div>
Reproductions below:
Not working:
https://jsfiddle.net/mquqonuq/1/
Working:
https://jsfiddle.net/mquqonuq/2/
I can't remember right now if it's an html spec issue but custom web elements need to be a two tag closed system, not a self closed single element.
Try:
<div id="app">
<x-component></x-component>
<y-component></y-component>
</div>
Which works.
EDIT:
if you look at google's web components primer it lists
3. Custom elements cannot be self-closing because HTML only allows a few elements to be self-closing. Always write a closing tag (<app-drawer></app-drawer>).
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>
```