V-для ключа, как V-модель в VueJS не работает - PullRequest
0 голосов
/ 14 мая 2018

Я использую Vuetify Framework для VueJS и пытаюсь воссоздать Диалог редактирования таблицы данных , но вместо статических значений я хочу, чтобы диалог редактирования был динамическим (пользователь может указать редактируемые поля).

Проблема в том, что я не могу использовать ключ, полученный от v-for для v-model, вот так.

<v-dialog v-model="dialog" max-width="500px">
            <v-card>
                <v-card-title>
                    <span class="headline">Edit Item</span>
                </v-card-title>
                <v-card-text>
                    <v-container grid-list-md>
                        <v-layout wrap>
                            <v-flex xs12 sm6 md4 v-for="(item, key, index) in editable_fields">
                                {{key}}
                                <h1>{{editedItem}}</h1>
                                <v-text-field v-model="editedItem.key" :label="key"></v-text-field>
                            </v-flex>
                        </v-layout>
                    </v-container>
                </v-card-text>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="blue darken-1" flat @click.native="close">Cancel</v-btn>
                    <v-btn color="blue darken-1" flat @click.native="save_edit">Save</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>

А это мои реквизиты и данные:

props: {
    editable_fields: {
        type: Object
        default: ()=> {name: '', email: ''}
    }
}


data: ->
    editedItem = @editable_fields
    return {editedItem: editedItem}

Итак, вопрос в том, как мне подойти к этому?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...