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>
Related
Hi I'm trying to make my Vue app in javascript so it isn't in html. Is there any way how to make it work? I tried this:
In HTML:
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="assets/actions.js" type="text/javascript"></script>
in javascript:
const AppNotes = Vue.createApp({
data: {
newFormtext: "",
contents: [
{title: "First Title", contents: ["content1", "content2", "content3"]}
]
},
methods: {
addNewFormEvent() {
this.titles.push(this.formtext)
}
}
})
AppNotes.mount('#content')
but it don't work in my html and text is still like {{ content.title }}
Here is a basic template of vuejs 2 using html and javascript, without node.
You must call Vue constructor and set the el value to some tag id.
new Vue({
el: "#notes-app",
data: {
counter: 0
},
methods: {
increment() {
this.counter++;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="notes-app">
{{ counter }}
<button v-on:click="increment">increment</button>
</div>
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.
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>
I'm trying to make a simple vue component work:
<div id="app">
<my-component></my-component>
</div>
<script>
Vue.component('my-component', {
template: '<div>A custom component! {{ xstr }} aa</div>',
data: function() {
return {
xstr: 'i really want this to be visible',
};
}
});
window.app = new Vue({
el: '#app',
});
</script>
But apparently xstr is not displayed. What am I missing?
I identified my issue, but it's not related to vue. I used jinja2 for generating the html, and since jinja uses the {{ }} syntax for templating as well, the two systems interfered.
I'm trying to compute a message in a Vue instance so that it shows up in a h1 element - reversed, but it's not showing up. Any idea why?
new Vue({
el: '#comp-prop2',
data: {
message: 'Hello World...again!'
},
computed: {
reversedMessage() {
return this.message.split('').reverse.join('');
}
}
})
<script src="https://unpkg.com/vue"></script>
<div id="comp-prop2">
<h1> {{ reversedMessage }} </h1>
</div>
Its reverse() not reverse
So like this
return this.message.split('').reverse().join('');
*reverse() is a method, you forgot the ()
Here is the fiddle