Vue.js用於添加和編輯的相同表單

Question

我是vue.js的新手，我正在努力擴展一些教程。 現在已經和這三個小時打架了，我很沮喪。 僅供參考，我正在使用firebase，但我不確定這里真的很重要。

所以，我有一個CRUD應用程序列出電影（我告訴你這是基本的！）。 頁面頂部有一個表單，您可以在其中添加電影，以及下面的表格，其中列出了新的注冊表。 這很好用。

我在表格的每一行添加了編輯和刪除按鈕。 刪除功能有效。 但編輯功能是問題所在。

我想在初始表單上使用v-if來觸發不同的方法（保存，編輯）並顯示不同的按鈕（添加，保存，取消）。

我不確定如何訪問對象來執行此操作，我嘗試了幾個和v-if說沒有定義對象。

感謝您的閱讀，請詢問您需要的任何內容。

 import './firebase' // this has my credententials and initializeApp import Vue from 'vue' import App from './App' import VueFire from 'vuefire' Vue.use(VueFire) Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', template: '<App/>', components: { App } }) 

 <template> <div id="app" class="container"> <div class="page-header"> <h1>Vue Movies</h1> </div> <div class="panel panel-default"> <div class="panel-heading"> <h3>Add Movie</h3> </div> <div class="panel-body"> <div v-if="!isEditing"> <form id="form" class="form-inline" v-on:submit.prevent="addMovie"> <div class="form-group"> <label for="movieTitle">Title:</label> <input type="text" id="movieTitle" class="form-control" v-model="newMovie.title"> </div> <div class="form-group"> <label for="movieDirector">Director:</label> <input type="text" id="movieDirector" class="form-control" v-model="newMovie.director"> </div> <div class="form-group"> <label for="movieUrl">URL:</label> <input type="text" id="movieUrl" class="form-control" v-model="newMovie.url"> </div> <input type="submit" class="btn btn-primary" value="Add Movie"> </form> </div> <div v-else> <form id="form" class="form-inline" v-on:submit.prevent="saveEdit(movie)"> <div class="form-group"> <label for="movieTitle">Title:</label> <input type="text" id="movieTitle" class="form-control" v-model="movie.title"> </div> <div class="form-group"> <label for="movieDirector">Director:</label> <input type="text" id="movieDirector" class="form-control" v-model="movie.director"> </div> <div class="form-group"> <label for="movieUrl">URL:</label> <input type="text" id="movieUrl" class="form-control" v-model="movie.url"> </div> <input type="submit" class="btn btn-primary" value="Save"> <button v-on:click="cancelEdit(movie['.key'])">Cancel</button> </form> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h3>Movies List</h3> </div> <div class="panel-body"> <table class="table table-stripped"> <thead> <tr> <th>Title</th> <th>director</th> </tr> </thead> <tbody> <tr v-for="movie in movies"> <td> <a v-bind:href="movie.url" v-bind:key="movie['.key']" target="_blank">{{movie.title}}</a> </td> <td> {{movie.director}} </td> <td> <button v-on:click="editMovie(movie)">Edit</button> </td> <td> <button v-on:click="removeMovie(movie)">Remove</button> </td> </tr> </tbody> </table> </div> </div> </div> </template> <script> import { moviesRef } from './firebase' export default { name: 'app', firebase: { movies: moviesRef }, data () { return { isEditing: false, // maybe this helps? newMovie: { title: '', director: '', url: 'http://', edit: false // or maybe this?? } } }, methods: { addMovie: function() { moviesRef.push( this.newMovie ) this.newMovie.title = '', this.newMovie.director = '', this.newMovie.url = 'http://' this.newMovie.edit = false }, editMovie: function (movie){ moviesRef.child(movie['.key']).update({ edit:true }); // can't access this one with v-if, not sure why //this.newMovie = movie; }, removeMovie: function (movie) { moviesRef.child(movie['.key']).remove() }, cancelEdit(key){ moviesRef.child(key).update({ edit:false }) }, saveEdit(movie){ const key = movie['key']; moviesRef.child(key).set({ title : movie.title, director : movie.director, url : movie.url, edit : movie.edit }) } } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style> 

Answer 1

單擊“ Edit按鈕時，應將isEditing更改為true，並應定義數據movie 。

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

Answer 2

正如評論中所建議的（Ben），我將電影聲明添加到初始數據對象中。 所以現在它看起來像這樣：

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

現在v-if工作正常，如下：

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

“正在編輯”不再需要，所以我刪除了它。