I'm taking the introductory phases at the Vue.js.
Everything is finde and all app components are showing until const { default: Vue } = require("vue"); is added. Then the webpage becomes like on the picture here
I have the following code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue#2/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<h1>{{ helloWorld }}</h1>
</div>
<div id="app-2">
<span v-bind:title="message">
Hold musen over dette, for at se hvordan titlen vil ændre sig!
</span>
</div>
<div id="app-3">
<span v-if="seen">
Now you see me
</span>
</div>
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
<div id="app-7">
<ol>
<!-- Create an instance of the todo-item component -->
<todo-item
v-for="item in groceryList"
b-bind:todo="item"
b-bind:key="item.id">
</todo-item>
</ol>
</div>
<script src="index.js"></script>
</body>
</html>
JS:
const { default: Vue } = require("vue");
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app = new Vue ({
el: '#app',
data: {
helloWorld: 'First vue output!'
}
});
var app2 = new Vue ({
el: '#app-2',
data: {
message: 'Du har loaded siden den: ' + new Date().toLocaleString()
}
});
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
});
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{text: 'Første punkt'},
{text: 'Andet punkt'},
{text: 'Tredje punkt'}
]
}
});
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function() {
this.message = this.message.split('').reverse().join('')
}
}
});
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
});
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: 'Vegetables' },
{ id: 1, text: 'Cheese' },
{ id: 2, text: 'Whatever else humans are supposed to eat' }
]
}
})
var app = new Vue
Related
I'm a beginner in VUE, I have programmed code that, after loading the web pages, downloads the data from json and renders it to wonder with the id "app".
However, I need the data to be loaded not at the beginning, but only after clicking the button.
Thank you very much for the tips and advice.
const app = new Vue ({
el: '#app',
data: {
urlPrefix: '',
newName: '',
newDescription: '',
newExperts_advice: '',
newProduct_benefit_2: '',
newImage: '',
characters: [{
}
],
},
methods: {
add() {
this.characters.push ({
name: this.newName,
description: this.newDescription,
experts_advice: this.newExperts_advice,
product_benefit_2: this.newProduct_benefit_2,
image: this.newImage,
})
}
},
created: function(){
fetch('./data.json')
.then(res => res.json())
.then(json => this.characters = json)
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TEST</title>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.12/dist/vue.js"></script>
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
</head>
<body>
<div id="app">
<button>Fetch data</button>
<div class="info-v1" v-for="item in characters">
<section class="head">
<h2>{{ item.name }}</h2>
<p> {{ item.description }}</p>
</section>
<section class="body">
<img v-bind:src="urlPrefix + item.image " />
<h3>{{ item.product_benefit_2 }}</h3>
<p>{{ item.experts_advice }}</p>
</section>
</div>
</div>
</body>
</html>
First you should create method in methods to fetch your data.
methods: {
yourNewMethodToFetchData() {
fetch('./data.json')
.then(res => res.json())
.then(json => this.characters = json)
}
}
Second add click event to your fetch data button like this:
<button #click="yourNewMethodToFetchData">Fetch data</button>
Lastly remove fetch code from created hook:
created: function(){
}
I've made a component (is that overkill?) to call recursively in order to render a tree, but it seems to be impossible to handle click events because stuff rendered inside the component can't see the method I want in the Vue's methods; this appears to be some monstrous complication about components and events.
How can I handle these click events?
Does it really have to be so difficult?
<script type="text/html" id="template-tree">
<ul>
<c-tree-item v-for="item in items" v-bind:item="item"></c-tree-item>
</ul>
</script>
<script type="text/html" id="template-tree-item">
<li v-on:click="clickTreeItem"> <!-- click doesn't work :( -->
<p> {{ item.Name }}</p>
<ul v-if="item.Items.length > 0">
<c-tree-item v-for="i in item.Items" v-bind:item="i"></c-tree-item>
</ul>
</li>
</script>
<script type="text/javascript">
var vueApp = undefined;
var ct = Vue.component('c-tree', {
template: document.getElementById('template-tree').innerHTML,
props: ['items']
});
var cti = Vue.component('c-tree-item', {
template: document.getElementById('template-tree-item').innerHTML,
props: ['item']
});
$(document).ready(function () {
var router = new VueRouter({
mode: 'history',
routes: []
});
vueApp = new Vue({
router,
el: '#vue',
data: {
tree: JSON.parse(document.getElementById('data').innerHTML)
},
methods: {
clickTreeItem: function(event) {
console.log('click');
console.log(JSON.stringify(event));
}
}
});
});
</script>
<div id="vue">
<c-tree v-bind:items="tree"></c-tree>
</div>
A component can only raise events -- which may have data associated with them.
A component has to listen to it's sub-components' events and may, in turn, pass them upwards as its own events.
Example: https://jsfiddle.net/gkch7bnr/1/
StackOverflow is stroppy about JSFiddle so here is some code:
<head>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.common.dev.js" integrity="sha256-soI/D3XnqcarOMK229d8GWs8P+gYViEsbWBeMaRoSPk=" crossorigin="anonymous"></script>
<script type="application/json" id="data">
[
{"Id": 1, "Name": "Name1", "Items": []},
{"Id": 2, "Name": "Name2", "Items": []},
{"Id": 3, "Name": "Name3", "Items": [
{"Id": 31, "Name": "Name31"},
{"Id": 32, "Name": "Name32"},
{"Id": 33, "Name": "Name33"}
]}
]
</script>
<script type="text/html" id="template-tree">
<ul>
<c-tree-item v-for="item in items" v-bind:item="item" v-on:click="$emit('click', $event)"></c-tree-item>
</ul>
</script>
<script type="text/html" id="template-tree-item">
<li>
<p v-on:click="$emit('click', item)" > {{ item.Name }}</p>
<ul v-if="item.Items && item.Items.length > 0">
<c-tree-item v-for="i in item.Items" v-bind:item="i" v-on:click="$emit('click', $event)"></c-tree-item>
</ul>
</li>
</script>
</head>
<body>
<div id="vue">
<c-tree v-bind:items="tree" v-on:click="clickTreeItem"></c-tree>
</div>
</body>
var vueApp = undefined;
var ct = Vue.component('c-tree', {
template: document.getElementById('template-tree').innerHTML,
props: ['items'],
methods: {
clickTI: function(e) { console.log('clickTI: ' + e.Name);}
}
});
var cti = Vue.component('c-tree-item', {
template: document.getElementById('template-tree-item').innerHTML,
props: ['item']
});
$(document).ready(function () {
vueApp = new Vue({
el: '#vue',
data: {
tree: JSON.parse(document.getElementById('data').innerHTML)
},
methods: {
clickTreeItem: function(event) {
console.log('clickTreeItem: ' + event.Name);
}
}
});
});
I am trying to implement a Vue Component with a custom render function.
As soon as my template has nested HTML elements, i get this error:
TypeError: this.$options.staticRenderFns is undefined
How do I implement staticRenderFns?
Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<comp temp="temp1"></comp>
</div>
<script>
var myTemplates = new Array();
myTemplates['temp1'] = Vue.compile("<div><div>This template will come from an AJAX source</div></div>").render;
var Comp = {
props: ["temp"],
data() {
return {
renderFunc: myTemplates[ this.$props.temp ],
}
},
render(h) {
return this.renderFunc()
}
};
new Vue({
el: "#app",
data: { },
components: { Comp }
});
</script>
</body>
</html>
var vm = new Vue({
el: '#one-example',
props: {
maximize: Boolean,
},
});
<div id="one-example" maximize>
<p v-if="maximize">Hello vue!</p>
{{maximize}}
</div>
What am I missing here? {{maximize}} is false here, shouldnt it be true since its initialized here? <div id="one-example" maximize>
https://jsfiddle.net/8ucdt58p/
Not sure what you want to achieve with this.
But I think that you should put maximize in data.
<div id="one-example" >
<p v-if="maximize">Hello vue!</p>
{{maximize}}
</div>
var vm = new Vue({
el: '#one-example',
data: function(){
return{
maximize:true
}
}
});
Otherwise via component & props:
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
<one-example :maximize="false"></one-example>
</div>
<script>
Vue.component('one-example', {
props: ['maximize'],
template: '<div > <p v-if="maximize">Hello vue!</p> {{maximize}} </div>'
});
var vm = new Vue({
el: '#app'
});
</script>
</body>
</html>
In case you don't need a true/false state for maximize but a set-to-something/unset ......
(As stated in the comments below) maximize can be set also like:
<one-example maximize="anything"></one-example>
or not set or void
<one-example ></one-example>
<one-example maximize=""></one-example>
I have a child instance of Vue and v-bind only works on the parent instance but not in the child one. I did a sample file to explain my issue.
Am I missing something?
This is my code:
var app2 = new Vue({
el: '#app2',
data: {
isSpinning2: true
},
methods: {
stop2: function() {
app2.isSpinning2 = false;
}
}
});
var app1 = new Vue({
el: '#app1',
data: {
isSpinning: true
},
methods: {
stop1: function() {
app1.isSpinning = false;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div id="app1">
<i v-bind:class="{'fa-spin': isSpinning}" class="fa fa-address-book"></i>
<button v-on:click="stop1">Stop 1</button>
<div id="app2">
<i v-bind:class="{'fa-spin': isSpinning2}" class="fa fa-address-book"></i>
<button v-bind:onclick="stop2">Stop 2</button>
</div>
</div>
This is exactly what components are for. Here is a component encapsulating your spinner buttons.
console.clear()
Vue.component("spinner",{
template: `
<div>
<i v-bind:class="{'fa-spin': isSpinning}" class="fa fa-address-book"></i>
<button v-on:click="stop"><slot /></button>
</div>
`,
data(){
return {
isSpinning: true
}
},
methods: {
stop: function() {
this.isSpinning = false;
}
}
})
var app1 = new Vue({
el: '#app1',
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div id="app1">
<spinner>Stop 1</spinner>
<spinner>Stop 2</spinner>
</div>