I've got task with I'm struggling a day, to do but I'm trying to figure out why vuetify components aren't visible. How did they write in task I need to resend this file so I'm thinking all code should be put in ui.html
My task looks like that:
ui.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
</head>
<body>
<h1>Task</h1>
<p>Please download this file and prepare nice UI using provided data.<br>
For task you can use Vuetify with minimal (if any) additional style.</p>
<p>In response please send this file with your UI proposal.</p>
<div id="app"></div>
<script>
new Vue({
el: "#app",
vuetify: new Vuetify(),
data: {
workerList: [
{
"gender":"male",
"name":{
"first":"Brian",
"last":"Adams"
},
"location":{
"street":{
"number":734,
"name":"Park Road"
},
"city":"Stoke-on-Trent",
"state":"County Fermanagh",
"country":"United Kingdom",
"postcode":"XR3 9EY",
"coordinates":{
"latitude":"18.0015",
"longitude":"-86.0374"
}
},
"email":"brian.adams#example.com",
"registered":"2008-11-07T11:53:14.120Z",
"phone":"015394 84142",
"cell":"0737-492-043",
"isActive": true,
"picture":{
"medium":"https://randomuser.me/api/portraits/med/men/42.jpg",
"thumbnail":"https://randomuser.me/api/portraits/thumb/men/42.jpg"
},
"nationality":"GB"
}
]
},
computed: {
perState() {
return this.workerList.reduce((acc, i) => {
acc[i.location.state] = (acc[i.location.state] || 0) + 1;
return acc;
}, {});
}
}
});
</script>
</body>
</html>
And when I put something from vuetify between <div id="app"> </div> something like
<v-alert
border="top"
color="red lighten-2"
dark
>
I'm an alert with a top border and red color
</v-alert>
then I'm only seeing plain html without style from vue like in the image
You forgot to link css:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
</head>
<body>
<h1>Task</h1>
<p>Please download this file and prepare nice UI using provided data.<br>
For task you can use Vuetify with minimal (if any) additional style.</p>
<p>In response please send this file with your UI proposal.</p>
<div id="app">
<v-app>
<v-main>
<v-container>
<v-alert
border="top"
color="red lighten-2"
dark
>
I'm an alert with a top border and red color
</v-alert>
</v-container>
</v-main>
</v-app>
</div>
<script>
new Vue({
el: "#app",
vuetify: new Vuetify(),
data(){
return {
workerList: [{"gender":"male", "name":{"first":"Brian", "last":"Adams"}, "location":{"street":{ "number":734, "name":"Park Road"}, "city":"Stoke-on-Trent", "state":"County Fermanagh", "country":"United Kingdom", "postcode":"XR3 9EY", "coordinates":{"latitude":"18.0015", "longitude":"-86.0374"}}, "email":"brian.adams#example.com", "registered":"2008-11-07T11:53:14.120Z", "phone":"015394 84142", "cell":"0737-492-043", "isActive": true, "picture":{ "medium":"https://randomuser.me/api/portraits/med/men/42.jpg", "thumbnail":"https://randomuser.me/api/portraits/thumb/men/42.jpg"}, "nationality":"GB"}]
}
},
computed: {
perState() {
return this.workerList.reduce((acc, i) => {
acc[i.location.state] = (acc[i.location.state] || 0) + 1;
return acc;
}, {});
}
}
});
</script>
</body>
</html>
Related
When I run the following code, I get the following results (Google Chrome running screenshot).
<!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">
<title>17-Learning of Scoped Slots and Named Slots</title>
<style>
.h1Class{
color:red;
}
</style>
</head>
<body>
<div id="div_new">
<h1 class="h1Class">first set</h1>
<cpn></cpn>
<h1 class="h1Class">second set</h1>
<cpn>
<!-- first method -->
<template slot="slotName" slot-scope="planallScope">
<!-- second method after Vue2.6 -->
<!-- <template v-slot:slotName="planallScope" > -->
<h4>{{planallScope.planall[0]}}</h4>
<h4>{{planallScope.planall[1]}}</h4>
<h4>{{planallScope.planall[2]}}</h4>
</template>
</cpn>
</div>
<template id="template_div">
<div>
<slot v-bind:planall="plan" name="slotName">
<ul>
<li v-for="item in plan"> {{ item }}</li>
</ul>
</slot>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue#2.7.7/dist/vue.js"></script>
<script>
const templateDivText = {
template: '#template_div',
data() {
return {
plan: ['C#', 'Java', 'JavaScript']
}
},
}
const app_new = new Vue({
el: '#div_new',
components: {
'cpn': templateDivText,
},
})
</script>
</body>
</html>
The running result is as follows:
enter image description here
When I use v-slot, the code is as follows:
<!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">
<title>17-Learning of Scoped Slots and Named Slots</title>
<style>
.h1Class{
color:red;
}
</style>
</head>
<body>
<div id="div_new">
<h1 class="h1Class">first set</h1>
<cpn></cpn>
<h1 class="h1Class">second set</h1>
<cpn>
<!-- first method -->
<!-- <template slot="slotName" slot-scope="planallScope"> -->
<!-- second method after Vue2.6 -->
<template v-slot:slotName="planallScope" >
<h4>{{planallScope.planall[0]}}</h4>
<h4>{{planallScope.planall[1]}}</h4>
<h4>{{planallScope.planall[2]}}</h4>
</template>
</cpn>
</div>
<template id="template_div">
<div>
<slot v-bind:planall="plan" name="slotName">
<ul>
<li v-for="item in plan"> {{ item }}</li>
</ul>
</slot>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue#2.7.7/dist/vue.js"></script>
<script>
const templateDivText = {
template: '#template_div',
data() {
return {
plan: ['C#', 'Java', 'JavaScript']
}
},
}
const app_new = new Vue({
el: '#div_new',
components: {
'cpn': templateDivText,
},
})
</script>
</body>
</html>
The running result is as follows:
enter image description here
So in Vue2.7, v-slot is not available, how to solve the problem?
Your syntax is correct, except one little detail: you can't use camelCase for slot names.
To be fair, I don't precisely know why, it has to do with template compilation and with the fact the slot names get parsed as element attributes in <template v-slot:slot-name"scope">. Vue's styling guideline does strongly advise on using kebab-case for attributes, directives and the likes, when used in templates or JSX.
However, name="slotName" + <template #slot-name="scope"> doesn't seem to work for slots.
In short, name="slotName" (+ <template #slotName="scope") does not work, but name="slot-name" (+ <template #slot-name="scope") does.
See it working, in Vue 2.7.7:
const templateDivText = Vue.defineComponent({
template: '#template_div',
data() {
return {
plan: ['C#', 'Java', 'JavaScript']
}
},
})
const app_new = new Vue({
el: '#div_new',
components: {
'cpn': templateDivText,
},
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.7.7/dist/vue.min.js"></script>
<div id="div_new">
<cpn>
<template #slot-name="{planall}">
<h4>{{planall[0]}}</h4>
<h4>{{planall[1]}}</h4>
<h4>{{planall[2]}}</h4>
</template>
</cpn>
</div>
<template id="template_div">
<div>
<slot name="slot-name" :planall="plan">
<ul>
<li v-for="item in plan"> {{ item }}</li>
</ul>
</slot>
</div>
</template>
Notes:
:planAll="" is shorthand for v-bind:planAll=""
<template #slot-name=""> is shorthand for <template v-slot:slot-name="">
when you only have one slot, you can remove the slot name altogether (it defaults to name="default")
I'm doing a Vue school course and I'm trying to do a little exercise with components and props. I'm trying to buid a simple button and paragraph component that takes the content of a paragraph as the prop's value:
index.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">
<title>Click-Counter</title>
</head>
<body>
<div id="app">
<h1>Vue.js Components Fundamentals</h1>
<click-counter click-title="The first counter is:"></click-counter>
<click-counter click-title="The second counter is:"></click-counter>
<click-counter click-title="The Third counter is:"></click-counter>
</div>
<script type="text/x-template" id="click-counter-template">
<div>
<p>{{ click-title }}</p>
<button v-on:click="count++"> {{ count }} </button>
</div>
</script>
<script src="https://unpkg.com/vue"></script>
<script src="app.js"></script>
</body>
</html>
app.js
Vue.component('click-counter', {
props: {
'click-title': {
type: String,
required: true
}
},
data () {
return {
count: 0
}
},
template: '#click-counter-template',
})
new Vue({
el: '#app'
})
The thing is that the content of the click-title prop is being evaluated but not rendered.
Screenshot of the Vue extension
Screenshot of the page's content
The problem was that, for Vue to understand that the prop in the app.js file and the index.html file are the same thing, you have to use camelCase in app.js (and when you define the component) and kebab-case in index.html (in the instances of the component).
In short, I changed this:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Some Head Info -->
</head>
<body>
<div id="app">
<h1>Vue.js Components Fundamentals</h1>
<!-- USE kebab-case HERE (click-title) -->
<click-counter click-title="The first counter is:"></click-counter>
<click-counter click-title="The second counter is:"></click-counter>
<click-counter click-title="The Third counter is:"></click-counter>
</div>
<script type="text/x-template" id="click-counter-template">
<div>
<!-- USE camelCase HERE (clickTitle) -->
<p>{{ clickTitle }}</p>
<button v-on:click="count++"> {{ count }} </button>
</div>
</script>
<!-- More stuff -->
</body>
</html>
app.js:
Vue.component('click-counter', {
props: {
// USE camelCase HERE (clickTitle)
'clickTitle': {
// Atributes
}
},
data () {
// Variables
},
// Template
})
// New Vue
The sample code below is taken from the JSFiddle on the vue-multiselect (v2) GitHub page and put into a single html page for the purposes of this example.
If you uncomment the v2 script/link tags and comment out the v3 tags. It works fine. However, using the v3 tags as shown gives the error "Uncaught TypeError: window.VueMultiselect is undefined".
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<multiselect
v-model="value"
:options="options"
:close-on-select="false"
:clear-on-select="false"
:hide-selected="true"
:preserve-search="true"
placeholder="Pick some"
label="name"
track-by="name"
:preselect-first="true"
id="example"
#select="onSelect"
>
</multiselect>
<pre class="language-json"><code>{{ value }}</code></pre>
</div>
<!-- WORKS: vue 2 + vue-multiselect 2
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.12/dist/vue.js"></script>
<script src="https://unpkg.com/vue-multiselect#2.1.6"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect#2.1.6/dist/vue-multiselect.min.css">
-->
<!-- DOES NOT WORK: vue 3 + vue-multiselect 3 -->
<script src="https://unpkg.com/vue#next"></script>
<script src="https://unpkg.com/vue-multiselect#3.0.0-alpha.2"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect#3.0.0-alpha.2/dist/vue-multiselect.css">
<script>
new Vue({
components: {
Multiselect: window.VueMultiselect.default
},
data: {
value: '',
options: [
{ name: 'Vue.js', language: 'JavaScript' },
{ name: 'Rails', language: 'Ruby' },
{ name: 'Sinatra', language: 'Ruby' },
{ name: 'Laravel', language: 'PHP', $isDisabled: true }
]
},
methods: {
customLabel (option) {
return `${option.library} - ${option.language}`
},
onSelect (option, id) {
console.log(option, id)
}
}
}).$mount('#app')
</script>
</body>
</html>
Simple code example
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.10/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
<h1>Bitcoin Price Index</h1>
<div v-for="currency in info">
{{ currency.description }}
<span v-html="currency.symbol"></span>{{ currency.rate_float || currencyToDeciaml }}
</div>
</div>
<script>
const app = new Vue({
el : '#app',
data : {
info : null,
},
filters : {
currencyToDeciaml(val) {console.log(`foo`);
return Number(val).toFixed(2);
}
},
// Dom is ready so now load the data
mounted() {
axios.get(`https://api.coindesk.com/v1/bpi/currentprice.json`)
.then(response => this.info = response.data.bpi);
},
});
</script>
</body>
</html>
I am trying to apply a simple filter currencyToDeciaml but it doesn't even get executed and foo does not display. I cannot seem to figure it out. Any help would be appreciated.
The correct syntax for filters is this:
{{ currency.rate_float | currencyToDeciaml }}
with only one pipe
I'm just doing following the Vuetable tutorial to use it in my own app, but my browser shows a blank page. Vue dev tools always says "Vue.js is not detected"; I feel like I'm missing something simple. I've followed the tutorial verbatim, and works in JSFiddle. Does anyone see the problem?
Main.js:
Vue.use(Vuetable);
Vue.config.devtools = true;
var app = new Vue({
el: '#app',
components:{
'vuetable-pagination': Vuetable.VuetablePagination
},
data: {
fields: ['name', 'email','birthdate','nickname','gender','__slot:actions'] },
computed: {},
methods: {
onPaginationData (paginationData) {
this.$refs.pagination.setPaginationData(paginationData)
},
onChangePage (page) {
this.$refs.vuetable.changePage(page)
},
editRow(rowData){
alert("You clicked edit on"+ JSON.stringify(rowData))
},
deleteRow(rowData){
alert("You clicked delete on"+ JSON.stringify(rowData))
}
},
})
HTML File:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test environment</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Use Vue framework -->
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
</head>
<body>
<!-- Supporting javascript -->
<script src="https://unpkg.com/smiles-drawer#1.0.2/dist/smiles-drawer.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource#1.5.1"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js"></script>
<!-- vuetable-2 dependencies -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.1/axios.min.js"></script>
<!-- vuetable-2 -->
<script src="https://rawgit.com/ratiw/vuetable-2/develop/dist/vuetable-2.js"></script>
<script src="main.js"></script>
<div id="app">
<div class="ui container">
<vuetable ref="vuetable" api-url="https://vuetable.ratiw.net/api/users" :fields="fields" pagination-path="" #vuetable:pagination-data="onPaginationData"
data-path="">
<template slot="actions" scope="props">
<div class="table-button-container">
<button class="ui button" #click="editRow(props.rowData)">
<i class="fa fa-edit"></i> Edit
</button>
<button class="ui basic red button" #click="deleteRow(props.rowData)">
<i class="fa fa-remove"></i> Delete
</button>
</div>
</template>
</vuetable>
<vuetable-pagination ref="pagination" #vuetable-pagination:change-page="onChangePage"></vuetable-pagination>
</div>
</div>
</body>
</html>