Я использую 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}
Итак, вопрос в том, как мне подойти к этому?