VueJs data won't display - javascript

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

How to make Vue app in javascript and make it work in html?

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>

vue.js component not working with laravel

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.

vue.js not work as expected

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>

Vue.js 2 component not displaying data

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.

Why is Vue Js computed message not showing up in the DOM?

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

Categories