Vue.js same form for add and edit


Vue.js same form for add and edit

I'm a rookie on vue.js and I'm trying to extend some tutorials a completed.
Been fighting with this three hours now and I'm frustrated. FYI, I'm using firebase but I'm not sure it really matters here.
So, I have a CRUD app for listing movies (I told you it was basic!).
There is a form at the top of the page where you can add movies, and a table below it, where the new registries are listed. This works well.
I added Edit and Delete buttons to each row on the table. The delete function works. But the Edit function is the problem.
I'd like to use v-if on the initial form, to trigger different methods (save, edit) and show different buttons (Add, Save, Cancel).
I'm not sure how to access the objects to do this, I tried a couple of things and the v-if says the object is not defined.
thank you for reading, please ask anything you need.

import './firebase' // this has my credententials and initializeApp
import Vue from 'vue'
import App from './App'
import VueFire from 'vuefire'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '',
  components: { App }


Solution 1:

You should change the isEditing to true when the Edit button clicked, and you should define the data movie.

editMovie: function (movie){
  ... = Vue.util.extend({}, movie); // deep clone to prevent modify the original object
  this.isEditing = true;

Solution 2:

As suggested in the comments (by Ben), I added the movie declaration to the initial data object. So now it looks like this:

data () {
    return {
      isEditing: false,
      newMovie: {
        title: '',
        director: '',
        url: 'http://',
        edit: false
      movie: {
        edit: false

Now v-if works just fine, like this:

<div v-if="!movie.edit">

“is Editing” was no longer necessary so I removed it.