Vue使用v-model更改密钥本身答案

【问题标题】：Vue change key itself with v-modelVue使用v-model更改密钥本身
【发布时间】：2019-04-30 04:12:08
【问题描述】：

我现在有点卡住了，找不到任何关于它的信息。

我有一个类似的 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>

但我被困在“更改密钥本身”部分。我希望我能解释我的意思，感谢您阅读本文！希望有人可以帮助我

【问题讨论】：

不清楚问什么

标签： json vue.js vuejs2

【解决方案1】：

您不能使用 v-model 更改密钥本身。将 Map 复制到 Array 中，然后编辑副本，完成后，清除 map 并再次添加 key/vals。

例子：

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

复制到新数组

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

然后，你可以使用 v-model 来编辑这个数组。

当用户点击保存或失去焦点时，您可以将值复制回地图/对象/字典中。

【讨论】：

我已经想到了，也做到了，但我希望有一个更简单的解决方案。感谢您的回复，确认这是不可能的。
是的。据我所知，这是做不到的。因为键是行的标识。并且更改键可能会使 Vue 混淆，现在哪一行是第一行。也许有人有更短的方式¯_(ツ)_/¯

【解决方案2】：

你可以试试：

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

【讨论】：

这是键的值，而不是键本身......这样它甚至不会改变行对象内的值
不行，可以绑定eventListener或者使用Array
你能告诉我一些更改键名的代码吗？
inputValue: '', rows: { a: 12 } methods: { userInput(key) { // 这里你改变行键 } }
我要求更改密钥本身。这就是您在示例中缺少的部分......