The code below just show the title in curly braces, what is wrong with the VueJs setup?
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/vue#2.5.13/dist/vue.js"></script>
</head>
<body>
<div id='app'>
<p>{{ title }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
title: 'A Title'
}
});
</script>
</body>
</html>
#Web Dev It works fine but you need to do this in script tag
var app = new Vue({
el: '#app',
data: {
title: 'A Title'
}
});
And now if you load the page and you will see a title and then you can open the console and change title by typing app.title = 'My new title'
Related
I am learning Vue and messing around with examples in their guide. I am trying to register a sub-component locally inside a root vue component as described here. But it does not appear on my page. What am I missing ? app.components also returns undefined.
console.log('Loading my script');
var componentX = {
template: `<h3>Hello</h3>`
}
var app = new Vue({
el: '#vue-div',
template: `<div>Vue is working</div>`,
components: {
'component-x': componentX
}
})
console.log(app.components);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div id="vue-div">
<component-x></component-x>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.12"></script>
<script src="./js/test.js"></script>
</body>
</html>
The issue is, your main Vue has a template - this replaces any HTML inside the target element
So, you can either add the component-x inside the new Vue constructor template:
console.log('Loading my script');
var componentX = {
template: `<h3>Hello</h3>`
}
var app = new Vue({
el: '#vue-div',
template: `<div>Vue is working<component-x></component-x></div>`,
components: {
'component-x': componentX
}
})
console.log(app.$options.components);
<div id="vue-div"></div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.12"></script>
<script src="./js/test.js"></script>
Or you can remove the template: from the new Vie constructor and the existing content of the target element will be used
console.log('Loading my script');
var componentX = {
template: `<h3>Hello</h3>`
}
var app = new Vue({
el: '#vue-div',
components: {
'component-x': componentX
}
})
console.log(app.$options.components);
<div id="vue-div">
Vue is working
<component-x></component-x>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.12"></script>
Suppose I have a simple Vue component like this:
Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
I don't want to render the component. I just want to pass the title somehow into blog-post component inside my script code, and get the DOM accordingly. For example, if I pass the title value Hello, then I expected the full DOM as <h3>Hello</h3>. I'll assign the DOM into a variable for using later.
One solution is to create a new Vue instance with only the target component, $mount it, and then get the outerHTML of its $el (root element):
Vue 2
<script src="https://unpkg.com/vue#2.6.12/dist/vue.min.js"></script>
<script>
Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
const app = new Vue({
template: `<blog-post title="Hello world" />`
}).$mount()
console.log(app.$el.outerHTML)
</script>
Vue 3
In Vue 3, create an app instance, and call its mount() on a newly created <div>. The return value of mount() is the root component, which contains $el:
<script src="https://unpkg.com/vue#3.2.39/dist/vue.global.prod.js"></script>
<script>
const app = Vue.createApp({
template: `<blog-post title="Hello world" />`
})
app.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
const comp = app.mount(document.createElement('div'))
console.log(comp.$el.outerHTML)
</script>
If you want to get HTML of your component, you must to use ref attribute of parent element.
Try something like that:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<button #click="logComponentBlogPost">Log Component</button>
</div>
<div v-show="false" ref="BlogPost">
<blog-post title="Hello Word"></blog-post>
</div>
</div>
<script>
let BlogPost = Vue.component('BlogPost', {
props: ['title'],
template: '<h3>{{ title }}</h3>',
});
new Vue({
el: '#app',
components: { BlogPost },
methods: {
logComponentBlogPost() {
console.log(this.$refs.BlogPost.innerHTML);
},
},
});
</script>
</body>
</html>
I want to output a hyperlink from an object. Is it possible to do so?
I currently have this in my store.js, would like to use this info to output
it in a modal on my website. I got it to display it, but the a href is outputting as text.
Checked this, but none of these solutions worked for me:
Adding hyperlink in Javascript array of objects
export default {
photos: [
{
name: "fox1",
image: "fox01.jpg",
id: 1,
header: "Photoshoot with Fox Apparel",
description:
"Photoshoot with " +
'Fox' +
", a sustainably - driven e - retailer from Canada."
}
]
}
here is the solution:
https://nexladder.com/vuejs-tutorial/vuejs-v-html-directive
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-html="content"></div>
</div>
<script>
new Vue ({
el: '#app',
data: {
content: '<h2>Hello World</h2>'
}
})
</script>
</body>
</html>
I'm trying to import a Vue.js component (#chenfengyuan/vue-qrcode) using UNPKG as CDN.
Currently, my setup works like this:
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.0"></script>
<script src="https://unpkg.com/#chenfengyuan/vue-qrcode#1.0.1/dist/vue-qrcode.min.js"></script>
<script>Vue.component(VueQrcode.name, VueQrcode);</script>
<script type="module" src="/client.js"></script>
In my client.js file I have my Vue instance:
new Vue({
el: "#app",
data: {
msg: "Vue js Hello World - Your First Vue.js App"
}
});
The setup that I would like to achieve is something like this:
<script type="module" src="/client.js"></script>
Then my client.js would look something like this:
import Vue from 'https://cdn.jsdelivr.net/npm/vue#2.6.10/dist/vue.esm.browser.js'
import VueQrcode from 'https://unpkg.com/#chenfengyuan/vue-qrcode#1.0.1/dist/vue-qrcode.min.js'
Vue.component(VueQrcode.name, VueQrcode);
new Vue({
el: "#app",
data: {
msg: "Vue js Hello World - Your First Vue.js App"
}
});
The Vue template (incrustated in HTML) is the following:
<div id="app">
<h1>{{ msg }}</h1>
<qrcode value="https://queue-r.glitch.me" :options="{ width: 200 }"></qrcode>
</div>
But sadly, this approach does not work. All I see in the console is that the custom tag is not recognized. With this approach, I want to achieve full separation of my Vue code from the HTML.
Any hints why it's not working as I want? What do you think?
The example you posted works fine, here is a working example.
new Vue({
el: "#app",
data: {
msg: "Vue js Hello World - Your First Vue.js App"
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/#chenfengyuan/vue-qrcode#1.0.1/dist/vue-qrcode.min.js"></script>
<script>Vue.component(VueQrcode.name, VueQrcode);</script>
<div id="app">
<h1>{{ msg }}</h1>
<qrcode value="https://queue-r.glitch.me" :options="{ width: 200 }"></qrcode>
</div>
I use Django and VueJs.
I tried to use Vue in Django template but when try to display data from my script nothing appear.
This is my html file :
{% load static %}
<body>
<p>No polls are available.</p>
<div id="app">
{{message}}
</div>
<script src="{% static "app.js" %}" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js">
</script>
</body>
And in my app.js :
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
My script is loaded but Hello Vue! won't appear.
It seems Vue JS delimiters {{ & }} crashed with jinja template delimiters. The solution is just change the delimiters.
new Vue({
delimiters : ['[[',']]'],
el: '#app',
data: () => {
return {
message: "hello world"
}
}
})
Here I change the delimiters to [[ & ]]. so, you can use it like this :
<div id="app">[[message]]</div>
Your data
data: {
message: 'Hello Vue!'
}
Should be
data: function () {
return {
messages: 'Hello!'
}
}
As it was pointed out in another answer: working example below:
new Vue({
el: '#app',
data: () => {
return {
message: "hello world"
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
Message: {{ message }}
</div>