VueJS не может обновлять значение v-текстового поля динамически - PullRequest
Новая
       8

VueJS не может обновлять значение v-текстового поля динамически

0 голосов
/ 10 июля 2020

Я динамически рисую компонент ввода формы (как на изображении), используя этот код: В этом случае key может быть «name», «gruppo», «codice» и т. Д. 

<v-row>
    <v-col v-for="(key,i) in keys_visible" :key="key" v-if="headers_visible[i].visible == true" cols="12" sm="12" md="12"
        v-if="!(headers_visible[i].type == 'bit' && editedItem[key] == -9)">
        <v-text-field @change="comp_change(key)" v-else-if="headers_visible[i].type == 'varchar'" v-model="editedItem[key]" :label="headers_visible[i].text"></v-text-field>
    </v-col>
</v-row>

Затем у меня есть функция comp_change, которая определена в блоке methods: 

comp_change (par1) {    
    var self = this;    
    self.editedItem["name"] = "example text";           
},

Я поместил debugger; в начало функции comp_change, и она останавливается каждый раз, поэтому функция запускается, но без отображения нового значения в поле "Nome" (v-модель редактируетсяItem ["name"]). Почему после comp_change я не вижу "пример текста" в поле?

Форма уже открыта, когда я активирую изменение

введите описание изображения здесь

1 Ответ

1 голос
/ 11 июля 2020

Вероятно, это проблема реактивности. Вы должны прочитать об этом здесь . Кроме того, если вы используете v-model, вам не нужно устанавливать значение самостоятельно, то есть вы можете отказаться от вызова @change. На мой взгляд, у вас есть два варианта.

a. Используйте объекты данных root в вашем компоненте вместо массива / объекта, а затем используйте v-модель как обычно. Это выглядит так: 

<template>
    <v-text-field v-model="name" />
    <v-text-field v-model="email" />
</template>
<script>
export default {
    data() {
        return {
            name: '',
            email: '',
            etc: ''
        }
    }
}
</script>

Теперь, когда поля вашей формы обновляются пользователем, вам не нужно использовать @change для установки значения. Это произойдет автоматически.

b. Или установите модель с помощью Vue .set () . В этом случае вы не собираетесь использовать v-модель. Вместо этого вы определили свои собственные методы управления данными. Это выглядит так: 

<template>
    <v-text-field @change="comp_change(key)" />
</template>
<script>
import Vue from 'vue';

export default {
    data() {
        return {
            editedItem: {}
        }
    },
    methods: {
        comp_change (par1) {    
            Vue.set( this.editedItem, 'name', 'example text' );     
        }
    }
}
</script>
...