this button component's, I need to click and pull another component with it, but I don't know how to do that, look at the return plantioComp, this is the component I want this button to call.
<template>
<div class="btn-center">
<v-btn class="mx-1" fab dark v-on:click="propri" type="submit">
<v-icon dark> mdi-plus </v-icon>
<p class="text-btn">Plantio</p>
</v-btn>
</div>
</template>
<script>
import plantioComp from './plantioComp.vue'
export default {
name: 'btnAdd',
methods: {
propri () {
// alert('here')
return plantioComp
}
}
}
</script>
It's not clear what you mean by calling another component on click or what plantioComp is. I assume you mean to make the component displayed? If so, it needs to be added to the template. If you have a condition where it needs to display only after a button click, you can create a boolean data variable that is initially false and then set to true on button click. Using a v-if directive on plantioComp you can have it display once the variable is true.
<template>
<div class="btn-center">
<v-btn class="mx-1" fab dark v-on:click="showPlantio=true" type="submit">
<v-icon dark> mdi-plus </v-icon>
<p class="text-btn">Plantio</p>
</v-btn>
</div>
<plantioComp v-if="showPlantio" />
</template>
<script>
import plantioComp from './plantioComp.vue'
export default {
name: 'btnAdd',
data() {
return {
showPlantio: false
}
}
}
</script>
I think your app is using vuetify. If you are specifically trying to show a modal, I would suggest using the v-dialog component.
Related
I have a child Card component:
<template>
<v-card
class="mx-auto"
max-width="500"
color=color
outlined
dark
>
<v-list-item three-line>
<v-list-item-content>
<div class="overline mb-4">
OVERLINE
{{color}}
</div>
<v-list-item-title class="headline mb-1">
Headline 5
</v-list-item-title>
<v-list-item-subtitle>Greyhound divisely hello coldly fonwderfully</v-list-item-subtitle>
</v-list-item-content>
<v-list-item-avatar
tile
size="80"
color="grey"
></v-list-item-avatar>
</v-list-item>
<v-card-actions>
<v-btn
outlined
rounded
text
>
Button
</v-btn>
</v-card-actions>
</v-card>
</template>
<script>
export default {
name: 'Card',
props: {
color: String
}
}
</script>
And from the parent component I want to pass in the color to the child. A part of the parent component's code is shown below.
<template>
<Card v-bind:color="color"/>
</template>
<script>
export default {
data() {
return {
color: "#FFC400"
}
},
}
</script>
As you can see I tried to use a prop to pass the color from the parent to the child, however even though I'm able to pass the data to the child, {{color}} prints out #FFC400 I'm not sure how to assign the color value to the v-card's color attribute. How can I achieve this? Thank you.
The only thing missing is to also bind the prop to the color attribute of the <v-card>, otherwise it's only receiving the string "color", rather than the variable of that name.
You can use v-bind:color="color" or the shorthand :color="color"
<v-card
class="mx-auto"
max-width="500"
:color="color"
outlined
dark
>
I have the following dropdown menu:
<template>
<v-menu close-on-click transition="slide-y-transition">
<template v-slot:activator="{ on, attrs }">
<v-btn color="primary" v-bind="attrs" v-on="on">
Menu
</v-btn>
</template>
<v-list>
<v-list-item v-for="(item, index) in menuItemsMisc" :key="index" v-model="item.model">
<v-list-item-title>
<v-btn block color="white" #click="item.fn">{{ item.title }}</v-btn>
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<!-- Modal code here -->
</template>
<script>
export default {
name: 'MenuBar',
data: () => ({
loginModal: false,
purchaseModal: false,
menuItemsMisc: [
{ title: 'Login',
model: 'loginModal',
fn: () => { this.loginModal = true}
},
{ title: 'Purchase',
model: 'purchaseModal',
fn: () => { this.purchaseModal = true }
},
]
}),
}
</script>
And I am trying to display this Login Modal When the Login Button is clicked in the dropdown.
<v-dialog v-model="loginModal" persistent max-width="500px">
<v-card class="elevation-12">
<v-toolbar color="primary" dark flat>
<v-toolbar-title>Login form</v-toolbar-title>
<v-spacer></v-spacer>
</v-toolbar>
<v-card-text>
<v-form>
<v-text-field name="login" prepend-icon="mdi-account" type="text"></v-text-field>
<v-text-field id="password" name="password" prepend-icon="mdi-lock" type="password">
</v-text-field>
</v-form>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary">Login</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
But whenever I click the Login or Purchase Button, I have an error that says:
TypeError: Cannot set property 'loginModal' of undefined
What is the Problem here?
From the Vue docs on v-model:
You can use the v-model directive to create two-way data bindings on form input, textarea, and select elements. It automatically picks the correct way to update the element based on the input type.
The v-model property on your <v-dialog> component is expecting it to be an input of some type.
You should be able to simply change this to a v-if:
<v-dialog v-if="loginModal" persistent max-width="500px">
This will cause the <v-dialog> component to display when your button is clicked.
EDIT: Please also make sure your data property on the Vue instance is declared as a class-style function. If you use a lambda function you will lose the this scope when referring to this.loginModal:
export default {
...
data() {
return {
...
}
}
}
I have got a page where there are several components, in one component I have a <v-speed-dial> with a fab button. When I open the speed dial it is placed under the component that's below it.
Here a picture so you can imagine what I am talking about.
Here is the code:
<template>
<v-card outlined>
<v-card-title>Selection</v-card-title>
<v-toolbar height="80" elevation="0">
<v-speed-dial class="mb-5" direction="bottom">
<template v-slot:activator>
<v-btn text fab>
<v-icon :color="myIcon.color" x-large>{{ myIcon.name }}</v-icon>
</v-btn>
</template>
<v-btn fab small color="green">
<v-icon color="white" x-large #click="changeStatusToUp()">mdi-chevron-up</v-icon>
</v-btn>
<v-btn fab small color="grey">
<v-icon color="white" x-large #click="changeStatusToMid()">mdi-unfold-less-vertical</v-icon>
</v-btn>
<v-btn fab small color="red">
<v-icon color="white" x-large #click="changeStatusToDown()">mdi-chevron-down</v-icon>
</v-btn>
</v-speed-dial>
</v-toolbar>
</v-card>
And here the JavaScript code, if it matters:
<script>
export default {
name: "Selection",
data() {
return {
myIcon: {
name: 'mdi-unfold-less-vertical',
color: 'grey'
},
colors: {
red: 'red',
green: 'green',
grey: 'grey'
}
}
},
props: {},
computed: {},
methods: {
changeStatusToUp() {
this.myIcon.name = 'mdi-chevron-up'
this.myIcon.color = 'green'
}
,
changeStatusToDown() {
this.myIcon.name = 'mdi-chevron-down'
this.myIcon.color = 'red'
}
,
changeStatusToMid() {
this.myIcon.name = 'mdi-unfold-less-vertical'
this.myIcon.color = 'grey'
}
}
};
Everything works as intended, if I put choose a different direction for the <v-speed-dial> to open, it shows fine, it's just hidden behind the component beneath it.
Any help is appreciated!
I think the problem is that your speed dial is inside a v-toolbar.
The toolbar component is used for rendering a navigation header generally at the top of the app.
Speed dials are floating buttons generally used at the bottom of the app.
If you remove the v-toolbar, your problem should get fixed.
EDIT: The vuetify docs here, show 2 different examples:
One where v-btn is used inside v-toolbar
The other example is using v-speed-dial
I think you ended up combining the two. Please go through the examples given in the docs and use the correct HTML based on your requirement
First of all, i've already read this post but it didn't help me (or i wasn't able to solve with that)
I've got a component which is a Vuetify Modal (ModalTurno.vue).
I'm trying to open this from a button in my Bottom Nav (bottomNav.Vue) (also a component).
I was even able to do that! but it opens on the Bottom Nav div. So I'd like to open this on my main vue (Turno.Vue) so i'll be able to see the whole modal. This is driven me crazy
Vuetify Modal (ModalTurno.Vue):
<template>
<v-dialog v-model="dialog" persistent max-width="500px" >
<v-card>
<v-card-title>
<span class="headline">User Profile</span>
</v-card-title>
</v-card>
</v-dialog>
</template>
<script>
export default {
data: () => ({
dialog: false
})
}
</script>
Bottom Nav (bottomNav.Vue) (Where the button is):
<template>
<v-card height="200px" flat>
<v-bottom-nav
:value="true"
color="indigo"
fixed
>
<v-btn
dark
flat
value="favorites">
<span>Agregar turno</span>
<v-icon>add_circle</v-icon>
</v-btn> <!--THIS IS THE BUTTON TO OPEN THE DIALOG -->
</v-bottom-nav>
</v-card>
</template>
<script>
export default {
name: 'header',
data () {
return {
bottomNav: 'recent'
}
}
}
</script>
Turno.Vue (Where the modal should be displayed):
<template>
<div>
<bottomNav> </bottomNav>
<modalTurno> </modalTurno>
</div>
</template>
<script>
import bottomNav from "./components/bottomNav.vue";
import modalTurno from "./components/ModalTurno.vue";
export default {
name: 'turno',
components: {
bottomNav,
modalTurno
}
}
</script>
Thanks to everyone who use his/her time to read this post!
You could do this by :
in Turno.vue
add ref="modalTurno" to (to make this component accessible via this.$refs.modalTurno - Accessing Child Component Instances & Child Elements)
in bottomNav.Vue
add #click="$parent.$refs.modalTurno.dialog = true" to v-btn (this will update dialog in modalTurno)
I am trying to make a component of two buttons in a single file to export it into a single column into ag-grid-vue. I am able to display only one button per column. Here's my code:
<template>
<div>
<v-btn fab small style="height: 24px; width:24px; margin-top: -1.5px;"
color='primary'
block='true'
#click.stop="dialogEdit = !dialogEdit">
<v-icon>fa-pencil</v-icon>
</v-btn>
<v-btn fab small style="height: 24px; width:24px; margin-top: -1.5px;"
color='primary'
block='true'
#click.stop="dialogDelete = !dialogDelete">
<v-icon>fa-trash</v-icon>
</v-btn>
</div>
</template>
<script>
import Vue from 'vue';
export default Vue.extend({
methods: {
invokeParentMethod () {
this.params.context.componentParent.methodFromParent(
`Row: ${this.params.node.rowIndex}, Col: ${
this.params.colDef.headerName
}`
);
}
}
});
</script>
I am importing this file in my web page design to add component and then use it in the grid's column to edit and update records in the grid. Neither its showing the error nor the button I changed the style and margins too but no sign of the delete button.
Found it the code above is working properly just need to remove block='true' from both button components. This property expands the button to 100% of available space so other button was getting overlapped.