【发布时间】:2018-11-23 13:17:29
【问题描述】:
错误信息:Error: Function DocumentReference.set() called with invalid data. Unsupported field value: undefined (found in field articleName)
我正在尝试将表单中的变量添加到我的 Firebase Cloud Firestore 数据库中。我使用 vuex 进行全局状态管理。当我将 CreateSale 组件中的变量传递给 sale->state 时,它们会被定义。但是当我在提交表单时调用操作 createSale 时,状态变量是未定义的。一切都应该正确设置。我注册了 Vuex 以及配置的 firebase。
sale.js(vuex 模块)
createSale(state, getters) {
console.log(state.articleName) //undefined
db.collection('clothes').add({
articleName: state.articleName,
description: state.description,
brand: state.brand,
price: state.price,
imagesRefs: getters.fileRefs
}).then(docRef => {
for (var i = 0; i < state.files.length; i++) {
}
this.$router.push('/')
}).catch(error => alert(error.message))
}
CreateSale.vue 模板:
<div class="container" id="createSale">
<form @submit.prevent="createSale" class="col s12">
<div class="row">
<div class="input-field col s12">
<input type="text" v-model="articleName" v-on:change="setArticleName(articleName)" required>
<label>Article Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input type="text" v-model="description" v-on:change="setDescription(description)" required>
<label>Description</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input type="text" v-model="brand" v-on:change="setBrand(brand)" required>
<label>Brand</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input style="padding-top: 16px;" type="number" v-model="price" v-on:change="setPrice(price)" required>
<label>Price</label>
</div>
</div>
<UploadFile />
<button type="submit" class="btn btn-success">Submit</button>
<router-link to="/" class="btn grey">Cancel</router-link>
</form>
脚本:
export default {
name: 'createSale',
components: {
UploadFile
},
data() {
return {
articleName: '',
description: '',
brand: '',
price: ''
}
},
methods: {
...mapMutations('sale', [
'setArticleName',
'setDescription',
'setBrand',
'setPrice'
]),
...mapActions('sale', {
createSale: 'createSale',
console: 'console'
})
}
【问题讨论】:
标签: firebase vue.js google-cloud-firestore vuex