VueJs textarea не показывает сохраненную информацию при редактировании

Question

Я использую Vuejs и внутри формы есть поле textarea.

При редактировании я не вижу значения внутри текстовой области.

При сохранении я не теряю предыдущую информацию, как ожидалось.

Если я отредактирую, он сохранит данные как положено.

Я только не могу найти, как представить значение textarea, при редактировании.

Внутри цикла v-for у меня есть текстовая область, которая расширяет родительский шаблон текстовой области:

<row v-for="(field, index) in fields" :key="index">
<div v-if="field.formType === 'textarea'">    
<va-textarea 
        :id="field.index" 
        v-model='formInput[index]' 
        v-bind:value="formValue[index]"
    ></va-textarea>

Поле определено в свойстве data:

data () {
    return {
        fields: {
            Commentts: {
                label     : 'Commentts',
                sortable  : false,
                type      : 'textarea',
                formType  : 'textarea',
                formReadOnly : false
            }

И у меня есть метод formSave для вставки или редактирования:

methods: {      
    formSave() {
        if ( this.formValue.Id === undefined) {
            this.formInput.Motivo_Id = this.formInput.Motivo.id
        }
        this.saveButton = true;
        this.formLoading= true;
        this.axios.post('Courses/save',
            {
                "data": { Id       : this.formValue.Id,
                          Date     : this.saveDateTime(this.formInput.Date),
                          faculty_Id: this.formInput.faculty_Id,
                          Commentts: this.formInput.Commentts
                        },
                 "route"        : this.$route.name,
            }).then((response) => {

Как я могу показать информацию textarea при редактировании формы?

Answer 1

выглядит странно, но давайте разберемся.

1. Loop

<row v-for="(field, index) in fields" :key="index">

В вашем примере fields - это объект, а переменная index содержит значение "Commentts", а не индекс. Это то, что вы хотите?

2. Распространение данных

<va-textarea 
    :id="field.index" 
    v-model='formInput[index]' 
    v-bind:value="formValue[index]"
></va-textarea>

Мне ничего не известно о реализации va-textarea компонента, но я надеюсь, что параметры v-model и :value были настроены правильно.

И с полем data текущего компонента реализации должно содержать and:

data () {
    return {
        fields: {
            Commentts: {
                .....
            },
        formInput: {
            Commentts: ...some data...
        },
        formValue: {
            Commentts: ...some data...
        },

Because declaration `v-model='formInput[index]'` requires `formInput` field in the root of the data field with `Commentts` inside.