I have a modal component that I was triggered when different components mutate the triggerModalState field. I have a getter in my Vuex store called getFulfillmentModalState. The modal is driven off of the local data field called dialog, which I have set to be the value of the getter this.$store.getters.getFulfillmentModalState. I am checking the value of this.$store.getters.getFulfillmentModalState, and it is true after I trigger the modal, but the dialog data is still false. What am I doing wrong here?
<template>
<div class="fulfillment-modal-component">
<v-row justify="center">
<v-dialog v-model="dialog" persistent max-width="290">
<v-card>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="rgba(53, 87, 151, 0.85)" text #click="changeModalState(true)">Cancel</v-btn>
<v-btn color="rgba(53, 87, 151, 0.85)" text #click="changeModalState(false)">Continue</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-row>
</div>
</template>
<script>
import {mapState} from 'vuex';
import store from './../../store/store';
export default {
name: 'fulfillment-modal',
mounted() {
},
data() {
return {
dialog: this.$store.getters.getFulfillmentModalState
}
},
}
</script>
dialog isn't reactive in this case because it's declared in data(). Move dialog to computed to make it reactive:
//...
export default {
data() {
return {
//dialog: /*..*/ // move to computed
}
},
computed: {
dialog() {
return this.$store.getters.getFulfillmentModalState
}
}
}
demo
Related
I am trying to create a custom component that wraps a Vuetify v-dialog.
I am having trouble with closing the dialog using a button inside the dialog.
I've tried many things, like #emit('input', false), this.value = false or using a local data value instead of value, but nothing seems to work.
My dialog looks like this (simplified):
// file: DeleteDialog.vue
<template>
<v-dialog :value="value" #input="$emit('input', $event)" width="550">
<template v-slot:activator="{ on, attrs }">
<slot
name="activator"
v-bind:on="on"
v-bind:attrs="attrs"></slot>
</template>
<v-btn #click="closeDialog">
Close
</v-btn>
</v-dialog>
</template>
<script>
export default {
props: {
value: Boolean,
},
methods: {
closeDialog() {
this.$emit('input', false);
},
},
};
</script>
When using the dialog like this, how do I get the Close-button to work?
<DeleteDialog>
<template v-slot:activator="{on, attrs">
<v-btn v-on="on" v-bind="attrs">
Show dialog
</v-btn>
</template>
Are you sure you want to delete this user?
</DeleteDialog>
The prop you pass value is responsible for showing or hiding your v-dialog inside DeleteDialog.vue.
So when clicking the button close, we will emit an event close that will maake the parent of DeleteDialog change the prop value it passed to it as false.
// in your parent component
<DeleteDialog :value="show_dialog" #close="show_dialog = false>
in your deleteDialog
//in delete dialog
<template>
<v-dialog :value="value" width="550">
<v-btn #click="closeDialog">
Close
</v-btn>
</v-dialog>
</template>
<script>
export default {
props: {
value: Boolean,
},
methods: {
closeDialog() {
this.$emit('close');
},
},
};
</script>
I think that is more suitable way of achieving what you want
I have a btnSmall component with this props and click
<v-btn
class="white--text btn_main_product"
color="red darken-1"
#click="click"
>
<slot/>
</v-btn>
props: {
click: Function
}
I use this component like this in another component.
<template>
<v-card
class="pa-4"
>
<v-text-field
v-model="lname"
></v-text-field>
<v-btn :click="clickAccept(lname)">accept/v-btn>
</v-card>
</template>
<script>
import BtnSmall from "../buttons/btnSmall";
export default {
name: "editName",
components: {BtnSmall},
data() {
return {
lname: ''
}
},
props: ['clickAccept']
}
</script>
and use this component in the page.
after use <edit-name :click-accept="nameClickAccept"/> whit this method.
nameClickAccept(fname, lname) {
console.log(lname)
}
my method run with change text-field i cant use click.
i need run method with click on the btn.
The vue-approach would be to emit an event in the btnSmall component and react on that event in the parent component.. This: https://v3.vuejs.org/guide/component-custom-events.html#event-names shows you how you can do it.
I can access method from parent vue component using ref and now I would like to access valid data from parent vue component using ref too
Parent.vue:
<v-btn #click="savenewcase()" dark text :disabled="!valid">Save</v-btn></v-toolbar-items>
<NewCaseDialog ref="NewCase"></NewCaseDialog>
<script>
methods: {
savenewcase() {
this.$refs.NewCase.save()
}
}
</script>
NewCaseDialog.vue
<template>
<v-card>
<v-form v-model="valid" ref="NewCaseForm" #keyup.native.enter="save()">
<v-container>
<v-text-field
:counter="64"
v-model="vsubject"
label="Subject / Judul"
prepend-icon="subject"
></v-text-field>
</v-container>
</v-form>
<v-btn #click="save()" :disabled="!valid" color="primary">Save</v-btn>
</v-card>
</template>
<script>
data: () => ({
valid: false,
}),
methods:{
save() {
//run save
}
}
</script>
Edit :
I'm using vuetify
You can try Props instead, it's much easier. From docs:
child-component.vue
Vue.component('blog-post', {
// camelCase in JavaScript
props: ['postTitle'],
template: '<h3>{{ postTitle }}</h3>'
})
parent.vue
<blog-post post-title="hello!"></blog-post>
This question already has answers here:
Vuex - Computed property "name" was assigned to but it has no setter
(5 answers)
Closed 4 years ago.
I am reproducing this code (Codepen):
<div id="app">
<v-app id="inspire">
<div class="text-xs-center">
<v-dialog
v-model="dialog"
width="500"
>
<v-btn
slot="activator"
color="red lighten-2"
dark
>
Click Me
</v-btn>
<v-card>
<v-card-title
class="headline grey lighten-2"
primary-title
>
Privacy Policy
</v-card-title>
<v-card-text>
Hello there Fisplay
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="primary"
flat
#click="dialog = false"
>
I accept
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</v-app>
</div>
The only difference between my real code and this one, is that I defined dialog in store/index.js (this in Nuxt.js) where I declared dialog an element of the state:
return new Vuex.Store({
state: {
dialog: false,
And then, in my current component I import that $store.state.dialog flag:
<script>
import { mapState } from 'vuex';
export default {
computed: {
...mapState([
'dialog'
]),
}
</script>
Whenever I click on the button, I get this error message:
[Vue warn]: Computed property "dialog" was assigned to but it has no
setter.
How to fix this? Any alternative?
You need to use the Vuex mutation to update the state.
https://vuex.vuejs.org/guide/mutations.html
In your example,
Your click event should be handled in the methods #click="handleClick"
methods: {
handleClick() {
this.$store.commit('openDialog')
}
In your store.js
mutations: {
openDialog(state) {
state.dialog = true
}
}
mapState will only create getters. You should define a mutation in your vuex store, which will be able to change the state.
Just add this to your store:
...
mutations: {
SET_DIALOG_FLAG_FALSE (state) {
state.dialog = false;
},
//optional if you do not want to call the mutation directly
//must important different is, that a mutation have to be synchronous while
//a action can be asynchronous
actions: {
setDialogFalse (context) {
context.commit('SET_DIALOG_FLAG_FALSE');
}
}
If you want to work with mapMutations/mapAction in your component:
import { mapMutation, mapActions } from vuex;
...
//they are methods and not computed properties
methods: {
...mapMutations([
'SET_DIALOG_FLAG_FALSE'
]),
...mapActions([
'setDialogFalse'
])
}
Now in your v-btn you can call the action or mutation.
<v-btn
color="primary"
flat
#click="this.setDialogFalse"> I accept </v-btn>
I have created a Sidebar component using Vuetify's navigation drawer. The code looks something like this:
<template>
<v-navigation-drawer persistent clipped v-model="isVisible" fixed app>
<!-- content of the sidebar goes here -->
</v-navigation-drawer>
</template>
<script>
export default {
name: 'Sidebar',
props: {
visible: Boolean,
},
data() {
return {
isVisible: this.visible,
};
},
}
</script>
Please note that I am duplicating the visible prop with the isVisible data. I tried using the prop directly in the v-model but every time the sidebar closed, I would get a warning in the console about changing props directly, as they would be overwritten when the parent re-renders.
In the parent view, I have a button on the toolbar that is supposed to change icon depending on the visibility of the toolbar.
<template>
<v-container fluid>
<sidebar :visible="sidebarVisible"/>
<v-toolbar app :clipped-left="true">
<v-btn icon #click.stop="sidebarVisible = !sidebarVisible">
<v-icon v-html="sidebarVisible ? 'chevron_right' : 'chevron_left'"/>
</v-btn>
</v-toolbar>
<v-content>
<router-view/>
</v-content>
<v-footer :fixed="fixed" app>
<span>© 2017</span>
</v-footer>
</v-container>
</template>
<script>
import Sidebar from '#/components/Sidebar.vue';
export default {
name: 'MainView',
data() {
return {
sidebarVisible: false,
fixed: false,
title: 'Title',
};
},
components: {
Sidebar,
},
};
</script>
The problem I have is that if I close the sidebar by clicking outside of it, the icon of the button on the toolbar does not change to chevron-left. Moreover, in order to bring the sidebar back, I need to click on the button twice.
Clearly this is because the sidebarVisible data in the main view is not updated when the sidebar closes. How do I make sure that sidebarVisible is updated when the sidebar closes?
I am use next construction...
in my component
<template>
<v-navigation-drawer v-model="localDrawer"></v-navigation-drawer>
</template>
...
<script>
export default {
props: { value: { type: Boolean } },
data: () => ({
localDrawer: this.value
}),
watch: {
value: function() {
this.localDrawer = this.value
},
localDrawer: function() {
this.$emit('input', this.localDrawer)
}
}
}
</script>
in parent layer
<app-drawer v-model="drawer"></app-drawer>
it's work for me
Use v-bind:value or :value to bind the drawer value from props.
Child component:
<template>
<v-navigation-drawer v-bind:value="drawer"></v-navigation-drawer>
</template>
<script>
export default {
props : ['drawer']
}
</script>
Parent component:
<template>
<app-side-bar :drawer="drawer"/>
<v-app-bar app clipped-left>
<v-app-bar-nav-icon #click.stop="drawer = !drawer"></v-app-bar-nav-icon>
</v-app-bar>
</template>
Vuetify navigation drawer issue fix:
Reset your browser window to default 100%
Here is the code,
Template:
<nav>
<v-toolbar flat app>
<v-toolbar-side-icon class="grey--text" #click="toggle"></v-toolbar-side-icon>
<v-toolbar-title class="text-uppercase grey--text">
<span class="font-weight-light">Repo</span>
<span>hub</span>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn flat color="grey">
<span>Sign Out</span>
<v-icon right>exit_to_app</v-icon>
</v-btn>
</v-toolbar>
<v-navigation-drawer app v-model="drawer" class="indigo">
<p>test</p>
</v-navigation-drawer>
</nav>
Script:
export default {
data() {
return {
drawer: false
};
},
methods:{
toggle(){
this.drawer = !this.drawer;
}
}
};