So I have a group of buttons that I'd like to be on the right side of the page, but justify-end/justify='end' is not working on v-row.
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#3.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-container>
<v-form>
<v-row justify='end'>
<v-col>
<v-btn>Button 1</v-btn>
<v-btn>Button 1</v-btn>
<v-btn>Button 1</v-btn>
</v-col>
</v-row>
</v-form>
</v-container>
</v-app>
</div>
<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>
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
</script>
</body>
I've looked at this question, but using text align seems hacky, and I'm wondering if there is a better solution?
Add the text-right class to <v-col>:
<v-col class="text-right">
<v-btn>Button 1</v-btn>
<v-btn>Button 2</v-btn>
<v-btn>Button 3</v-btn>
</v-col>
Without changing the grid system try to add <spacer/> component in order to put v-col to the end of row like :
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#3.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-container tag="div">
<v-form>
<v-row justify="end">
<spacer/>
<v-col>
<v-btn>Button 1</v-btn>
<v-btn>Button 1</v-btn>
<v-btn>Button 1</v-btn>
</v-col>
</v-row>
</v-form>
</v-container>
</v-app>
</div>
<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>
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
</script>
</body>
You have to use justify-end in a class on a v-row to get it to work. You can't use it on a v-col. DOCS: https://vuetifyjs.com/en/api/v-row/ You may need to play around with the spacing depending on where you put them but you can use the class to do that to avoid any styles.
<v-form>
<v-row class="justify-end">
<v-btn class="mr-2">Button 1</v-btn>
<v-btn class="mr-2">Button 1</v-btn>
<v-btn class="mr-2">Button 1</v-btn>
</v-row>
</v-form>
Related
I am trying to create a component with a list of cards but it always throws an error:
Property or method "ac" is not defined on the instance but referenced during render.
I have check code looks like to be valid, but the error come every time. I have googled but unfortunately it did not help. Appreciate any help.
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<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">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<vutify-main></vutify-main>
</div>
<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>
Vue.component('vutify-main', {
template: `
<v-app>
<v-main>
<v-btn #click="show">test</v-btn>
<accounts-list
:overlay="accountListOverlay"
:accounts="accountList"
></accounts-list>
</v-main>
</v-app>
`,
data: function() {
return {
accountListOverlay: false,
accountList: [{ "account_id": 1, "account_name": "1", "account_url": "1" }]
};
},
methods: {
show: function() {
return this.accountListOverlay = !this.accountListOverlay;
}
}
});
Vue.component('accounts-list', {
template: `
<v-overlay :value="overlay">
<v-list color="transparent">
<v-card v-for="ac in accounts" :key="ac.account_id" light style="margin-bottom: 10px;>
<div>
<v-card-title class="font-weight-regular">Account Name:</v-card-title>
<v-card-subtitle class="font-weight-light body-1">
{{ ac.account_url }} - {{ ac.account_id }}
</v-card-subtitle>
</div>
<div>
<v-card-title class="font-weight-regular">Description:</v-card-title>
<v-card-subtitle class="font-weight-light body-1">
{{ ac.account_name }}
</v-card-subtitle>
</div>
<v-card-actions>
<v-btn
text color="#7ec3d8"
rounded
text
>Get data
</v-btn>
</v-card-actions>
</v-card>
</v-list>
</v-overlay>
`,
props: {
overlay: {
type: Boolean,
required: true,
default: false
},
accounts: {
type: Array,
required: false,
default: []
}
},
});
new Vue({
el: '#app',
vuetify: new Vuetify()
});
</script>
</body>
</html>
How can i open a dialog outside of the template?
<v-dialog v-model="dialog_elimina_richiesta" activator="dialog_elimina_richiesta" persistent>
<v-card>
<v-card-title class="headline">Use Google's location service?</v-card-title>
<v-card-text>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="green darken-1" text #click="dialog_elimina_richiesta = false">Disagree</v-btn>
<v-btn color="green darken-1" text #click="dialog_elimina_richiesta = false">Agree</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<template v-slot:item.data_richiesta="{ item }">{{item.data_richiesta | formatDate}}</template>
<template v-slot:item.actions="{ item }">
<v-icon medium class="mr-2" color="purple" #click="editAttivita(item)">mdi-pencil</v-icon>
<v-icon
medium
class="mr-2"
color="red"
#click="detailDeleterichiesta(item)"
>mdi-delete</v-icon>
</template>
and there is my function which should open the dialog, and i don't know why it doesn't work, the property dialog_elimina_richiesta should be accessible from everywhere using this.property, and with the dialog that has the v-model on that property i can't get why it doesn't work
detailDeleterichiesta(item){
this.dialog_elimina_richiesta=true;
console.log(item);
},
Please find the below code where the dialog is opened outside the template.
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
dialog: false
}
},
methods: {
openDialog: function() {
this.dialog = true
}
}
})
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app id="inspire">
<v-row justify="center">
<v-btn color="primary" dark #click.stop="openDialog">
Open Dialog
</v-btn>
<v-dialog v-model="dialog" max-width="290">
<v-card>
<v-card-title class="headline">User Data?</v-card-title>
<v-card-text>
Data </v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="green darken-1" text #click="dialog = false">
Disagree
</v-btn>
<v-btn color="green darken-1" text #click="dialog = false">
Agree
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-row>
</v-app>
</div>
<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>
</body>
</html>
I have a problem with my code:
<v-card class="d-flex flex-column">
<v-img id="image" src="w3schools.com/js/landscape.jpg" height="600"> <v-card-title class="headline">
Search for
<v-spacer></v-spacer>
<span class="caption font-italic font-weight-light">yes</span>
</v-card-title>
</v-img>
</v-card>
<script>
setTimeout(function() { document.getElementById("image").setAttribute("src", "w3schools.com/js/smiley.gif"); }, 5000); </script>
It is not changing the image. What seems to be the problem?
It's not recommended to manipulate DOM as you're doing, try to create a data property called url and change it where you want, for example set the setTimeout in the created hook as follows:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
url: 'https://www.w3schools.com/js/landscape.jpg',
}
},
created(){
setTimeout(()=>{
this.url="https://www.w3schools.com/js/smiley.gif"},5000)
}
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<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>
<div id="app">
<v-app>
<v-content>
<v-container>
<v-card class="d-flex flex-column"> <v-img id="image" :src="url" height="600"> <v-card-title class="headline"> Search for <v-spacer></v-spacer> <span class="caption font-italic font-weight-light">yes</span> </v-card-title> </v-img> </v-card>
</v-container>
</v-content>
</v-app>
</div>
i'm a beginner here. I'm creating a vuefity form with three <v-file-input> each having one <v-select> option retrospectively.
i would like to append the value from <v-select> when value changed to the label of it's respective <v-file-input>.
Please help me, solve this problem. CodePen : https://codepen.io/jx46/full/pooMwQp
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
items: ['one', 'two', 'three']
})
})
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-content>
<v-container>
<v-form>
<v-row>
<v-col>
<v-select :items="items" label="Standard"></v-select>
</v-col>
<v-col>
<v-file-input label="File input"></v-file-input>
</v-col>
</v-row>
<v-row>
<v-col>
<v-select :items="items" label="Standard"></v-select>
</v-col>
<v-col>
<v-file-input label="File input"></v-file-input>
</v-col>
</v-row>
<v-row>
<v-col>
<v-select :items="items" label="Standard"></v-select>
</v-col>
<v-col>
<v-file-input label="File input"></v-file-input>
</v-col>
</v-row>
</v-form>
</v-container>
</v-content>
</v-app>
</div>
<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>
</body>
</html>
You must define data for each pair (v-select- v-input). Then bind it as v-model and :label.
Template:
<v-select
v-model="firstSelectValue"
:items="items"
label="Standard"
></v-select>
<v-file-input :label="firstSelectValue"></v-file-input>
JS:
data: () => ({
items: ['one','two','three'],
firstSelectValue: 'File input',
secondSelectValue: 'File input',
thirdSelectValue: 'File input',
})
Changed Codepen: https://codepen.io/RobbyFront/pen/eYYqEBx
I have a dashboard that needs to be shown if the viewer size sm and above but hidden if is xs.
The original template i had is below. The problem is that below md the navigation drawer would be hidden.
<div id="app">
<template>
<v-app id="inspire">
<v-navigation-drawer
v-model="drawer"
expand-on-hover
app
clipped
class="d-none d-sm-inline"
>
<v-list >
<v-list-item
>
<v-list-item-action>
<v-icon>
assignment
</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>
assignment
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
</v-app>
</template>
</div>
EDIT:
This is a full example. Below 1264px width the drawer will disappear:
<!DOCTYPE html>
<html>
<head>
<!-- Load polyfills to support older browsers -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.4/polyfill.js"></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>
<link href="https://cdn.materialdesignicons.com/4.0.96/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>
</head>
<body>
<div id="app">
<template>
<v-app id="inspire">
<v-navigation-drawer
v-model="drawer"
expand-on-hover
app
clipped
class="d-none d-sm-inline"
>
<v-list >
<v-list-item
>
<v-list-item-action>
<v-icon>
assignment
</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>
assignment
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
</v-app>
</template>
</div>
<script type="text/babel" data-presets="es2015">
new Vue
(
{
el: "#app",
vuetify: new Vuetify(),
data:
{
drawer: null,
},
}
);
</script>
</body>
</html>
EDIT2: The suggested solution by Mr Rossi also doesnt work and has the same behaviour
<!DOCTYPE html>
<html>
<head>
<!-- Load polyfills to support older browsers -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.4/polyfill.js"></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>
<link href="https://cdn.materialdesignicons.com/4.0.96/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>
</head>
<body>
<div id="app">
<template>
<v-app id="inspire">
<v-navigation-drawer
v-model="drawer"
expand-on-hover
app
clipped
:class="{'display': $vuetify.breakpoint.smAndUp ? 'none' : 'inline'}"
>
<v-list >
<v-list-item
>
<v-list-item-action>
<v-icon>
assignment
</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>
assignment
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
</v-app>
</template>
</div>
<script type="text/babel" data-presets="es2015">
new Vue
(
{
el: "#app",
vuetify: new Vuetify(),
data:
{
drawer: null,
},
}
);
</script>
</body>
</html>
If I understand your problem correctly, this is about breakpoints.
You can use Vuetify breakpoints to show or hide some elements.
For example if you want to display it for sm and above you can use this:
:class="$vuetify.breakpoint.smAndUp ? "d-inline" : "d-block"
or simply hide it if is xs:
:class="$vuetify.breakpoint.xsOnly ? "d-inline" : "d-block"
This is the docs page on how to use breakpoints: https://vuetifyjs.com/en/customization/breakpoints#breakpoints
The issue was that for some reason vuetify was moving the navigation drawer 100% to the left and so hiding it. My solution is to override that move by adding the style 'style="transform: translateX(0%);top:48px;"' as below:
<!DOCTYPE html>
<html>
<head>
<!-- Load polyfills to support older browsers -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.4/polyfill.js"></script>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>
<link href="https://cdn.materialdesignicons.com/4.0.96/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>
</head>
<body>
<div id="app">
<template>
<v-app id="inspire">
<v-navigation-drawer
v-model="drawer"
expand-on-hover
app
clipped
style="transform: translateX(0%);top:48px;"
class="d-none d-sm-inline"
>
<v-list >
<v-list-item
>
<v-list-item-action>
<v-icon>
assignment
</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>
assignment
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
</v-app>
</template>
</div>
<script type="text/babel" data-presets="es2015">
new Vue
(
{
el: "#app",
vuetify: new Vuetify(),
data:
{
drawer: null,
},
}
);
</script>
</body>
</html>
The translateX overrides the move to the left and top:48px sets the nav drawer to be below an app bar i had in the original, if you dont have an app bar then you wont need it.
I am not sure if this is a bug in vuetify v2.0.11 but it works with that fix. Hope this is helpful to someone, it took me an hour or so to find and fix