Question

我正在使用Vuejs，并且在表单内有一个textarea字段。

编辑时，我在文本区域内看不到该值。

如果我保存，则不会丢失预期的先前信息。

如果我进行编辑，它将按预期存储数据。

我只能在编辑时找不到如何显示textarea值。

在v-for循环中，我具有扩展父textarea模板的textarea：

<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) => {

在编辑表单时如何显示文本区域信息？

Answer 1

看起来很奇怪，但让我们找出答案。

循环

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

以您的示例fields为对象，变量index包含值“ Commentts”而不是索引。是你想要的吗？

数据传播

<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.

VueJs textarea在编辑时不显示存储的信息

1 个答案: