[Vue warn]:v-on 处理程序中出现错误:“TypeError:无法读取未定义的属性”

发布于 01-14 16:20 字数 3593 浏览 1 评论 0原文

尝试将数据发布到集合(使用 Vue (2.6.11)、Vuetify (2.4.0)、Vuex (3.6.2)、Vue-router (3.5.1)、Axios)但出现此错误。一直无法修复它,不知道为什么它不起作用。

添加项目表单(AddItem.vue):

                <v-form ref="form" v-model="valid">
                    <v-text-field name="title" v-model="form.title" label="title" required>
                    </v-text-field>

                    <v-text-field name="description" v-model="form.description" label="Item Description" required>
                    </v-text-field>

                    <v-select name="categoryID" v-model="form.category" :items="categories" item-text="name" item-value="_id" label="Category" required>
                    </v-select>

                    <v-select name="qualityID" v-model="form.quality" :items="qualities" item-text="name" item-value="_id" label="Quality" required>
                    </v-select>

                    <v-text-field name="price" v-model="form.price" label="Price" required>
                    </v-text-field>

                    <v-file-input name="photo" v-model="form.photo" multiple label="Item photo(s)">
                    </v-file-input>

                    <v-btn rounded text :disabled="!valid" @click="addItem()">
                                Add
                            </v-btn>

                    <v-btn @click="reset">
                        Reset Form
                    </v-btn>
                </v-form>

<script>
    import GoBack from '@/components/GoBack'

    export default {
        name: "addItem",
        data: () => ({
            form: {
                title: "",
                description: "",
                category: "",
                quality: "",
                price: ""
            },
            categories: [
                { _id: "620a6acaff3f5cebc8370121", name: 'Food' },
                { _id: "620a6ae3ff3f5cebc8370123", name: 'Clothes' },
                { _id: "620a6af1ff3f5cebc8370125", name: 'Furniture' },
                { _id: "620a6b04ff3f5cebc8370127", name: 'Electronics' },
                { _id: "620a7a0fded499a220f386d1", name: 'Tools' },
                { _id: "620a7ca7178dada11844dbad", name: 'Toys' }
            ],
        }),
        methods: {
            addItem() {
                if (this.$refs.form.validate()) {
                    this.$store.dispatch('addItem', this.form)
                }
            }
        }
    };
</script>

store.js:

import Vue from 'vue'
import Vuex from 'vuex'
import axios from '@/config'
import router from '@/router'

Vue.use(Vuex)

export default new Vuex.Store({
  
  actions: {
    addItem() {
      axios
        .post(`/items`, {
          title: this.form.title,
          description: this.form.description,
          categoryID: this.form.category,
          qualityID: this.form.quality,
          price: this.form.price
        })
        .then(response => {
          console.log(response.data)
        })
        .catch(error => {
          console.log(error)
          console.log(error.response.data.message)
          router.push('/items').catch(() => {});
        })
    }
  }
})

错误:

error messages

错误中的“标题”专门引用“this.store.title”中的“标题”(例如,如果我将其更改为“this.store.title1”,错误将开始引用“title1”),以为我没有看到它有什么问题,并且找不到任何解决方案。如果有人知道我如何解决这个问题,我将不胜感激,如果我可以提供更多信息,请告诉我,感谢您的时间。

Trying to post data to a collection (using Vue (2.6.11), Vuetify (2.4.0), Vuex (3.6.2), Vue-router (3.5.1), Axios) but getting this error. Haven't been able to fix it, not sure why it won't work.

The add item form (AddItem.vue):

                <v-form ref="form" v-model="valid">
                    <v-text-field name="title" v-model="form.title" label="title" required>
                    </v-text-field>

                    <v-text-field name="description" v-model="form.description" label="Item Description" required>
                    </v-text-field>

                    <v-select name="categoryID" v-model="form.category" :items="categories" item-text="name" item-value="_id" label="Category" required>
                    </v-select>

                    <v-select name="qualityID" v-model="form.quality" :items="qualities" item-text="name" item-value="_id" label="Quality" required>
                    </v-select>

                    <v-text-field name="price" v-model="form.price" label="Price" required>
                    </v-text-field>

                    <v-file-input name="photo" v-model="form.photo" multiple label="Item photo(s)">
                    </v-file-input>

                    <v-btn rounded text :disabled="!valid" @click="addItem()">
                                Add
                            </v-btn>

                    <v-btn @click="reset">
                        Reset Form
                    </v-btn>
                </v-form>

<script>
    import GoBack from '@/components/GoBack'

    export default {
        name: "addItem",
        data: () => ({
            form: {
                title: "",
                description: "",
                category: "",
                quality: "",
                price: ""
            },
            categories: [
                { _id: "620a6acaff3f5cebc8370121", name: 'Food' },
                { _id: "620a6ae3ff3f5cebc8370123", name: 'Clothes' },
                { _id: "620a6af1ff3f5cebc8370125", name: 'Furniture' },
                { _id: "620a6b04ff3f5cebc8370127", name: 'Electronics' },
                { _id: "620a7a0fded499a220f386d1", name: 'Tools' },
                { _id: "620a7ca7178dada11844dbad", name: 'Toys' }
            ],
        }),
        methods: {
            addItem() {
                if (this.$refs.form.validate()) {
                    this.$store.dispatch('addItem', this.form)
                }
            }
        }
    };
</script>

The store.js:

import Vue from 'vue'
import Vuex from 'vuex'
import axios from '@/config'
import router from '@/router'

Vue.use(Vuex)

export default new Vuex.Store({
  
  actions: {
    addItem() {
      axios
        .post(`/items`, {
          title: this.form.title,
          description: this.form.description,
          categoryID: this.form.category,
          qualityID: this.form.quality,
          price: this.form.price
        })
        .then(response => {
          console.log(response.data)
        })
        .catch(error => {
          console.log(error)
          console.log(error.response.data.message)
          router.push('/items').catch(() => {});
        })
    }
  }
})

The errors:

error messages

The 'title' from the error is specifically referencing 'title' from 'this.store.title' (For example, if I change it to 'this.store.title1' the error will start referencing 'title1'), thought I don't see what's wrong with it, and can't find any solutions. If anyone knows how I can sort this out I'd greatly appreciate it, let me know if there's any more information I can provide, thanks for your time.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

演出会有结束2025-01-21 16:20:45

在您的商店中,您尝试使用未定义的 this.form 。您必须使用参数,而不是使用 this.form。您已经在此处将参数传递给您的操作 this.$store.dispatch('addItem', this.form) 所以在这一侧没有什么可做的,但您没有使用它。

import Vue from 'vue'
import Vuex from 'vuex'
import axios from '@/config'
import router from '@/router'

Vue.use(Vuex)

export default new Vuex.Store({
  
  actions: {
    addItem({},form) {
      axios
        .post(`/items`, {
          title: form.title,
          description: form.description,
          categoryID: form.category,
          qualityID: form.quality,
          price: form.price
        })
        .then(response => {
          console.log(response.data)
        })
        .catch(error => {
          console.log(error)
          console.log(error.response.data.message)
          router.push('/items').catch(() => {});
        })
    }
  }
})

In your store you are trying to use this.form which is undefined. Instead of using this.form you have to use a parameter. You are already passing a parameter to your action here this.$store.dispatch('addItem', this.form) so on this side there is nothing more to do, but you are not using it.

import Vue from 'vue'
import Vuex from 'vuex'
import axios from '@/config'
import router from '@/router'

Vue.use(Vuex)

export default new Vuex.Store({
  
  actions: {
    addItem({},form) {
      axios
        .post(`/items`, {
          title: form.title,
          description: form.description,
          categoryID: form.category,
          qualityID: form.quality,
          price: form.price
        })
        .then(response => {
          console.log(response.data)
        })
        .catch(error => {
          console.log(error)
          console.log(error.response.data.message)
          router.push('/items').catch(() => {});
        })
    }
  }
})
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文