vue.js not work as expected - javascript

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>

Related

How to select the vue js el using CSS attribute selector?

I have this HTML:
<div data-identifier='app'>
...
</div>
And I have this Vue js code:
var app = new Vue({
el: '[data-identifier]',
data: {
},
methods: {
}
});
But it seems that Vue does not understand [data-identifier] CSS selector.
How can I use attribute CSS selector with Vue js?
It should work as shown below:
var app = new Vue({
el: '[data-identifier]',
data: {
msg:"hello"
},
methods: {
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div data-identifier='app'>
{{msg}}
</div>

Why doesn't my component template show up in Vue?

I've just started learning Vue. Now I'm trying to build my first component, but the template didn't show up, and the console didn't give me any error.
Here's some of my code:
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
and here's a Jsbin with my full code
Your Vue instance needs a mounting id specified in the el property:
var vm = new Vue({
el: '#app', // Specifying a DOM id "app"
data() {
// ...
}
})
And the app template needs to be wrapped with that same id:
<div id="app">
<button-counter></button-counter>
</div>
Demo:
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
var vm = new Vue({
el: '#app',
data() {
return {
name:'yazid',
age:'20',
date:'press to known the date',
skills:['HTML','CSS','JS'],
ele:'<h1> elements from vue js</h1>',
completed_languages:[{
lang:'html',
percent:'90%'
},{
lang:'CSS',
percent:'70%'
},{
lang:'JS',
percent:'70%'
}]
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button-counter></button-counter>
</div>

Using props in vue components

I'm just learning Vue, and now starting with props. I'm having trouble integrating them into my code below.
I want to make so a prop name can be sent to the greet component. I want name to be shown in the component<greet name="User"></greet> and it to render: <div>Welcome, User!</div>
Vue.component('greet', {
data() {
return {
}
},
template: '<div>Welcome !</div>'
})
new Vue({ el: '#app' })
There is good documentation about it
Vue.component('greet', {
props: {
'player-name': {
type: String,
required: true
}
},
data() {
return {
}
},
template: '<div>Welcome {{playerName}}!</div>'
})
new Vue({
el: '#app'
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<greet player-name="User"></greet>
</div>

VueJs data won't display

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>

VueJS Passing data Through render

I'm currently working with VueJS 2, I would like to pass some params from the HTML to the VueJS component. Let me show you.
My Html Div looks like this :
<div id="app" :id="1"></div>
And my javascript :
new Vue({
store, // inject store to all children
el: '#app',
render: h => h(App)
});
My App Component:
<template>
<div>
{{ id }}
</div>
</template>
<script>
export default {
props: {
id: Number
}
}
</script>
I would like to get the id passed in the Html, in my App component.
How should I do ?
Here is one way.
<div id="app" data-initial-value="125"></div>
new Vue({
el: '#app',
render: h => h(App, {
props:{
id: document.querySelector("#app").dataset.initialValue
}
})
})
But you don't have to use a render function.
new Vue({
el: '#app',
template:"<app :id='id'></app>",
data:{
id: document.querySelector("#app").dataset.initialValue
},
components:{
App
}
})
Also, I'm using querySelector assuming you rendered initialValue (instead of id) to the page as an attribute, but you could just as easily put it somewhere else on the page like a hidden input or something. Really doesn't matter.

Categories