我正在使用Vue-CLI
.我有一个叫做viewGenres.vue
的 Vue 组件。该组件包含Vuetify
表,该表显示来自 Vue 存储的所有当前genres
。我正在尝试为每个流派添加一个新选项,即"编辑"。
我的目标是表中的每一行都有一个edit
按钮。单击该按钮后,应呈现一个名为editGenre.vue
的新组件。
此组件应包含一个填写的表单,其中包含特定流派的所有现有详细信息。 我有几个问题:
1(单击edit
按钮后,浏览器上会出现以下异常:
ReferenceError: Vue 未在 VueComponent.editGenre 中定义
2(为了让我从数据库中加载正确的属性,我需要定义editGenre组件的"ID"属性。有没有人对最佳方法有任何建议?
这是viewGenres.vue:(方法editGenre是负责渲染新组件的方法(。
<template>
<div class="root" ref="container">
<h2>Genres Info</h2>
<br>
<v-data-table
:headers="headers"
:items="genres"
hide-actions
class="elevation-1">
<template slot="items" slot-scope="props">
<td class="text-xs-left">{{ props.item.id }}</td>
<td class="text-xs-left">{{ props.item.name }}</td>
<td class="text-xs-left">{{ props.item.desc }}</td>
<td class="text-xs-left">{{ props.item.artists }}</td>
<td class="text-xs-left"><v-btn flat @click="editGenre(props.item.id)">EDIT</v-btn></td>
<td class="text-xs-left"><v-btn flat @click="deleteGenre(props.item.id)">Delete</v-btn></td>
</template>
</v-data-table>
</div>
</template>
<script>
import editGenre from '@/components/administratorView/Genres/editGenre.vue'
const firebase = require('../../../firebaseConfig.js')
export default {
data: function(){
return{
headers: [
{ text: 'ID', value: 'id'},
{ text: 'Name', value: 'name'},
{ text: 'Description', value: 'desc'},
{ text: 'Artists', value: 'artists'},
{ text: 'Edit Genre'},
{ text: 'Delete From DB'}
]
}
},
computed: {
genres: function(){
return this.$store.state.genre.genres
}
},
components: {
editGenre
},
methods: {
editGenre: function(id){
var ComponentClass = Vue.extend(editGenre)
var instance = new ComponentClass()
instance.$mount()
this.$refs.container.appendChild(instance.$el)
},
deleteGenre: function(id){
console.log("Trying to delete " +id)
firebase.firestore.collection("genres").doc(id).delete().then(()=>{
this.$store.dispatch('genre/getGenresFromDB')
alert("Deleted Document Successfully")
}).catch(function(error){
alert(error)
})
}
},
mounted(){
this.$store.dispatch('genre/getGenresFromDB')
}
}
</script>
<style scoped>
</style>
这是editGenre.vue:
<template>
<v-dialog v-model="editGenre" persistent max-width="500px">
<v-card>
<v-card-title>
<h2>Edit Genre {{genre.name}}</h2>
</v-card-title>
<v-card-text>
<v-text-field
v-model="name"
label="Name"
:error-messages="nameErrors"
@touch="$v.name.$touch()"
@blur="$v.name.$touch()"
/>
<v-textarea
v-model="desc"
label="Description"
box
/>
<v-combobox
v-model="artists"
label="Artists"
:items="artistNames"
:error-messages="artistsErrors"
@touch="$v.artists.$touch()"
@blur="$v.artists.$touch()"
multiple>
</v-combobox>
<v-btn
color="primary"
@click="submit">
Submit
</v-btn>
<v-btn
color="primary"
@click="close">
Close
</v-btn>
</v-card-text>
</v-card>
</v-dialog>
</template>
<script>
import { required } from 'vuelidate/lib/validators'
const firebase = require('../../../firebaseConfig')
export default{
data: function(){
return{
name: '',
desc: '',
artists: []
}
},
props: {
id: String
},
mounted: function(){
let docRef = firebase.firestore.collection("genres").doc(this.id)
docRef.get().then(function(doc){
if(doc.exists){
this.name = doc.data().name
this.desc = doc.data().desc
this.artists = doc.data().artists
}
else{
console.error("Doc Doesn't Exist!")
}
}).catch(function(error){
console.error(error)
})
}
}
</script>
<style scoped>
</style>
谢谢! 汤姆
您错过了在viewGenres.vue
组件中导入Vue
,因此请按如下方式添加它:
....
<script>
import Vue from 'vue'
import editGenre from '@/components/administratorView/Genres/editGenre.vue'
const firebase = require('../../../firebaseConfig.js')
....
你可以通过这种方式传递道具:
var ComponentClass = Vue.extend(
props:{
id:{type:String, default () { return id}}
},editGenre)
并删除这个:
props: {
id: String
}
根据Evan You的说法:
不建议使用 new 手动构造子组件。这是势在必行且难以维护的。您可能希望使子组件成为数据驱动的组件,使用 和 v-for 来动态呈现子组件,而不是自己构造它们。