0
私はvue.jsの新人です。私は完成したチュートリアルを拡張しようとしています。 今この3時間で戦っていて、私はイライラしています。参考までに、私はfirebaseを使用していますが、私は本当にここで重要なのか分かりません。Vue.js追加と編集と同じフォーム
私はムービーを掲載するためのCRUDアプリを持っています（私は基本的だと言っていました）。 ムービーを追加できるページの上部にフォームがあり、その下に新しいレジストリがリストされているテーブルがあります。これはうまくいく。
テーブルの各行に[編集]と[削除]ボタンを追加しました。 delete関数が機能します。しかし、編集機能が問題です。
最初のフォームで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>
おかげ 私の方法は次のようになり、今 editMovie：機能（動画）{ moviesRef.child（映画[ 'キー。']）更新（{編集：真}）; //this.newMovie = movie; this.movie = Vue.util.extend（{}、movie）; //元のオブジェクトを変更しないようにするには深いクローン this.isEditing = true; }、 コンソールでは、「Uncaught ReferenceError：Vueが定義されていません」と表示されます。 – kilinkis
Vueを.vueファイルにインポートしていません。 'vue 'からのVueのインポート – Ben
私はmain.jsファイルの「vue'からVueをインポートします。その蜂は十分ではありませんか？ とにかく、本当に助けとなったのは、データオブジェクトにムービーを追加することでした。今私のv-ifが動作します:) 私はisEditingを使用しませんでしたが、movie.edit。 – kilinkis