SSENSE / vue-carousel

A flexible, responsive, touch-friendly carousel for Vue.js
https://ssense.github.io/vue-carousel/
MIT License
1.72k stars 504 forks source link

slideclick problem #525

Open JorgeMantillaHernandez opened 4 years ago

JorgeMantillaHernandez commented 4 years ago

Hello, I am using the vue-carousel but I am having a problem with @slideclick, what I want to do is that when I click on an item in my carousel it will go to the store and change a state to true to open a dialog from vuetify. It worked perfectly for me with a @click on the v-card and towards a mutation call, but now that I use this functionality of the carousel slideclick, it gives me an error. my code:

` <slide v-for="restaurante of listaRestaurantes" v-bind:key="restaurante.id" @slideclick="handleSlideClick()" :data-index="restaurante.id" :data-name="restaurante.name">

...
        </slide>

methods: { ... mapMutations ('restaurants', ['showRestauante']), handleSlideClick (dataset) { this.mostrarRestauante ({idRestaurante: dataset.index, nombreRestaurante: dataset.name}); } } store: showRestaurant (state, {restaurantID, restaurantName}) { state.popup_restaurante = true; state.idRestaurante = idRestaurante; state.restaurantname = restaurantname; }, popup_restaurante is the one that activates the dialog when it is true And the dialog component: ...... </-dialog> computed:{ ...mapState('restaurantes', ['popup_restaurante', 'nombreRestaurante']), }` Everything works for me when it's with a @ click = "showRestaurant ({restaurantRid: restaurant.id, restaurantname: restaurant.name})" but when I use that event the carousel gives me this error

vue.runtime.esm.js? 2b0e: 619 [Vue warn]: Computed property "popup_restaurante" was assigned to but it has no setter.

found in

---> at components / basicos / PopupRestaurante.vue <Layouts / default.vue> at layouts / default.vue

and I do not understand, because I am modifying the value with the mutation by clicking, does anyone know what it can be? Thank you
lazehang commented 4 years ago

@JorsMantilla9 could you create a jsfiddle to reproduce your issue? But just looking at the error log it seems you are trying to mutate a computed property that has no setter.

vishu3278 commented 4 years ago

I'm having trouble in "slideclick" event. It working on desktop browser but not on mobile browser. Slide=> <slide class="stall animateanimated animatezoomIn animate__fast" v-for="list in stallList" v-bind:key="list.id" v-bind:data-id="list.id" @slideclick="showProjectModal" :data-id="list.id" :data-name="list.name"> methods: { showProjectModal: function(dataset) { this.$store.commit('showProject','block'); this.projectModal = true; console.log(dataset.name, dataset.id); }, Store => state:{ project: 'none' },mutations: {showProject (state,data) { state.project = data }} Modal=><div class="modal-wrapper" :style="{ display: getDisplayStatus }" @click.self="$store.commit('showProject','none')"> computed: { getDisplayStatus() { return this.$store.getters.getProject } },

Please suggest a solution

lazehang commented 4 years ago

computed: { getDisplayStatus() { return this.$store.getters.getProject } },

have you setup getters in store (getProject)? Just looking at what you have provided it seems you only have state and mutations in store or you may have just missed mentioning it here.

vishu3278 commented 4 years ago

Yes. getProject (state) { return state.project }