Vue изменить сам ключ с V-моделью

Question

сейчас немного застрял и не могу ничего найти об этом.

У меня есть json что-то вроде:

rows: {
    someKeyName: 'test'
}

Теперь я хочу изменить 'someKeyName' на 'myNewKeyName',

Я начал с этого

<section class="row" v-for="(value, key) in rows">
    <input type="text" v-model="........."/> <-- change key itself.. how...
    <input type="text" v-model="rows[key]"/> <-- change value of the key
</section>

Но я застрял в части «сам ключ изменения».Я надеюсь, что объяснил, что я имею в виду, спасибо за чтение этого!надеюсь, кто-нибудь может мне помочь

Answer 1

Вы можете попробовать:

<section class="row" v-for="(value, key) in rows" :key="key">
    <input type="text" v-model="inputValue" @input="userInput(key)" />
</section>

data() {
    return {
        inputValue: '',
        rows: {
            a: 12
        }
    }
},
methods: {
    userInput(key) {
        // here you change the rows key
    }
}

Answer 2

Вы не можете изменить сам ключ с помощью v-модели.Скопируйте карту в массив, затем отредактируйте копию, и после этого очистите карту и снова добавьте ключ / значения.

Пример:

{ '101':'Clark', '102','Stephanie' }

копировать в новый массив

[ {id: '101', name:'Clark'}, {id: '102', name:'Stephanie'} ]

Затем вы можете использовать v-модель для редактирования этого массива.

Когда пользователь нажимает сохранить или потерял фокус, вы можете скопировать значения обратно в карту / объект / словарь.