CODEWITHSUNDEEP
javascriptfirebasevue.jsvuejs2vuex
RogerFedFan
RogerFedFan

Reputation: 566

Remove Item from Firebase Vuex

I'm new to Vue and I wanted to learn Veux by building a simple CRUD application with firebase. So far I've been able to figure things out (though if you see something badly coded, I would appreciate any feedback) but I can't seem to figure out how to remove an item. The main problem is that I can't reference it properly. I'm getting [object Object] in my reference path but when I log it I get the correct id.

Firebase Flow:

enter image description here

So I'm making a reference to 'items', Firebase generates a unique key for each item and I added in an id to be able to reference it, though I could also reference it by the key.

I've been able to do this without using Veux and just component state but I've been trying for hours to figure out what I'm doing wrong.

I'm also getting this error:

enter image description here

Store.js

import Vue from 'vue'
import Vuex from 'vuex'
import database from './firebase'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    items: []
  },

  mutations: {
    RENDER_ITEMS(state) {
      database.ref('items').on('value', snapshot => {
        state.items = snapshot.val()
      })
    },

    ADD_ITEM(state, payload) {
      state.items = payload
      database.ref('items').push(payload)
    },

    REMOVE_ITEM(index, id) {
      database.ref(`items/${index}/${id}`).remove()
    }
  },

  // actions: {

  // }
})

Main.vue

<template>
  <div class="hello">
    <input type="text" placeholder="name" v-model="name">
    <input type="text" placeholder="age" v-model="age">
    <input type="text" placeholder="status" v-model="status">
    <input type="submit" @click="addItem" />
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item.name }}
        {{ item.age }}
        {{ item.status }}
        <button @click="remove(index, item.id)">Remove</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import uuid from 'uuid'

export default {
  name: 'HelloWorld',

  created() {
    this.RENDER_ITEMS(this.items)
  },

  data() {
    return {
      name: '',
      age: '',
      status: '',
      id: uuid(),
    }
  },

  computed: {
    ...mapState([
      'items'
    ])
  },

  methods: {
    ...mapMutations([
      'RENDER_ITEMS',
      'ADD_ITEM',
      'REMOVE_ITEM'
    ]),

    addItem() {
      const item = {
        name: this.name,
        age: this.age,
        status: this.status,
        id: this.id
      }

      this.ADD_ITEM(item)

      this.name = ''
      this.age = ''
      this.status = ''
    },

    remove(index, id) {
      console.log(index, id)

      this.REMOVE_ITEM(index, id)
    }
  }
}
</script>

Upvotes: 2

Views: 742

Answers (1)

AbM
AbM

Reputation: 7779

The first argument to your mutation is always the state.

In your initial code:

REMOVE_ITEM(index, id) {
  database.ref(`items/${index}/${id}`).remove()
}

index is the state object, which is why you are getting [object Object] in the url.

To fix your issue, pass an object to your mutation and change it to:

REMOVE_ITEM(state, {index, id}) {
  database.ref(`items/${index}/${id}`).remove()
}

And when you are calling your mutation with the remove method, pass an object as well:

remove(index, id) {
  console.log(index, id)

  // pass an object as argument
  // Note: {index, id} is equivalent to {index: index, id: id}
  this.REMOVE_ITEM({index, id})
}

Upvotes: 2

Related Questions