In my welcome.blade.php file, I have:
<div id="app">
#{{ message }}
</div>
And in the app.js file:
var app = new Vue({
el: '#app',
data: {
message: "Hello"
}
})
The output I'm getting is just '{{ message }}' and not Hello.
Related
I am a newbie with Vue, now I define the vue code like this:
import Vue from "vue";
export default Vue.extend({
data: () => {
message: "show message";
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<div id="app">
<div v-text="message"></div>
</div>
</template>
why the UI did not show the Vue data message? this is my sandbox version code: https://codesandbox.io/s/loving-sea-snvfj?file=/src/App.vue:149-237
I recommend reading the documentation on Vue v2 or v3 on the official website - it is quite good.
Regarding your situation, it is better for you to familiarize yourself with these sections of the documentation
Below is an example from the official website:
var app = new Vue({
el: '#app',
data: {
message: 'show message'
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
{{ message }}
</div>
I am working in Laravel Blade and trying to convert some blade files to vue components. I have a property in my blade file of pagetitle. I am trying to get the dynamically created page title to render on the screen from my vue component and not blade. But in my vue console, data comes back as "". Not sure why the data is carrying over.
Header.vue
<template>
<div>
<p title="page-title">{{pageTitle}}</p>
</div>
</template>
<script>
export default {
props: {
pageTitle: {
type: String
}
}
}
</script>
app.js
window.Vue = require('vue');
import Header from './components/Header';
Vue.component('header', Header);
const app = new Vue({
el: '#app',
});
main.blade.php
<div id="app">
<header :page-title="{{$pageTitle}}"></header>
</div>
header.blade.php //where page title is being pulled from
<title>
{{ $pageTitle ?? 'Default Page Title' }}
</title>
In your Header.vue file you are defining pageTitle as a data property, while it should be defined as a prop, since you are actually providing it as a property on the header component.
props: {
pageTitle: {
type: String
}
}
There already exists an HTML element called header, I suggest you rename your component. Your component is missing a props attribute to take input from blade:
Pagetitle.vue:
<template>
<div>
<p title="page-title">{{ this.pageTitle}}</p>
</div>
</template>
<script>
export default {
props: ['title'],
data() {
return {
pageTitle: '',
};
},
created() {
this.pageTitle = this.title
}
}
</script>
We created a title property. When the component is created, we set the component's pageTitle to the title given in main.blade.php.
app.js
window.Vue = require('vue');
import Pagetitle from './components/Pagetitle';
Vue.component('pagetitle', Pagetitle);
const app = new Vue({
el: '#app',
});
main.blade.php
<div id="app">
<pagetitle :title="foo bar"></pagetitle>
</div>
https://v2.vuejs.org/v2/guide/components-props.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>
I'm trying to use vue.js in the following example, but the result in browser is "product" instead of "Boots".
<div id="app">
<h2>{{product}}</h2>
</div>
<script src="https://unpkg.com/vue#2.5.16/dist/vue.js">
const app = new vue({
el: "#app",
data: {
product: "Boots"
}
})
</script>
Change vue to Vue, then works.
app = new Vue({ //not vue, it is Vue
el: "#app",
data: {
product: "Boots"
}
})
<script src="https://unpkg.com/vue#2.5.16/dist/vue.js"></script>
<div id="app">
<h2>{{product}}</h2>
</div>