v-модель не распознает переданное свойство, если textarea пусто

Question

Я пытаюсь создать очень простое приложение для чата. Один из компонентов, который контролирует отправку одного сообщения после «ввода», выдаёт мне эту ошибку:

Error in render: "TypeError: Cannot read property 'content' of undefined"

найдено в

---> <MessagesComponent> at resources/js/components/MessagesComponent.vue
   <Messagerie> at resources/js/components/MessagerieComponent.vue
     <Root>"

Однако, если я предварительно определю свойство 'content' в функции данных как что-то вроде 'text123', оно прекрасно работает без каких-либо ошибок, но показывает это сообщение в поле ввода (textarea), что, конечно, нежелательно. Я проверял код много раз, и я действительно не знаю, где может быть ошибка. Может кто-нибудь дать идею?

<template>
<div class="card">
    <div class="card-header">john</div>
    <div class="card-body">
        <Message :message="message" v-for="message in messages" :user="user"/>
        <form action="" method="POST">
            <div class="form-group">
                <textarea name="content" v-model="content" placeholder="Écrivez votre message" :class="{'form-control': true, 'is-invalide': errors['content']}" @keypress.enter="sendMessage"></textarea>
                <div class="invalid-feedback" v-if="errors['content']">
                    {{ errors['content'].join(', ') }}
                </div>
            </div>
        </form>
    </div>
</div>

<script>
import Message from './MessageComponent'
import {mapGetters} from 'vuex'

export default {
    components: {Message},
    data(){
        return {
            content: '',
            errors: {},
        }
    },
    computed: {
        ...mapGetters(['user']),
        messages: function(){
            return this.$store.getters.messages(this.$route.params.id)
        }
    },
    mounted() {
        this.loadMessages()
    },
    watch: {
        '$route.params.id': function(){
            this.loadMessages()
        }
    },
    methods: {
        loadMessages(){
            this.$store.dispatch('loadMessages', this.$route.params.id)
        },
        async sendMessage(e){
            if(e.shiftKey === false){
                this.errors = {}
                e.preventDefault()          
                try{
                    await this.$store.dispatch('sendMessage', {
                        content: this.content,
                        userId: this.$route.params.id
                    })
                }catch (e){
                    this.errors = e.errors
                }
            }
        }
    }
}

Answer 1

Итак, проблема в том, что эта строка устанавливает this.errors в undefined:

this.errors = e.errors

В вашем шаблоне вы затем пытаетесь получить доступ к errors['content'], что не получится. Вы не можете получить доступ к свойству undefined.

Я не совсем уверен, чего пытается достичь эта линия, возможно, e.errors не является правильным свойством? Главное, чтобы вы гарантировали, что this.errors останется объектом. например,

this.errors = e.errors || {}

Это устранит ошибку консоли, но для ее исправления потребуется некоторое понимание того, какое именно значение должно быть, когда e.errors равно undefined.

Кстати, нет необходимости писать errors['content'] в вашем шаблоне. Вы можете просто использовать errors.content.

Answer 2

Я думаю, что это связано с ошибками, попробуйте изменить ошибки для массива errors: [],, если это не работает, попробуйте добавить условие для ошибок перед каждым условием ошибок, например v-if="errors && errors['content']"