Как изменить имя ключа объекта JSON через vue js - PullRequest
Новая
       40

Как изменить имя ключа объекта JSON через vue js

1 голос
/ 31 марта 2019

У меня возникли проблемы с изменением имен ключей "User1" и "User2" объекта JSON с помощью vue. 

myJSON = {"User1": {"damage": "10000"}, "User2": {"damage": "10000"}}
users = ["User1","User2","User3","User4"]

Это код цикла и некоторые комментарии. На самом деле проблема в том, что я не могу использовать «ключ» в v-модели ... 

<div class="mb-3" v-for="(item, key, index) in myJSON">
 <el-select v-model="key" filterable placeholder="Select"> // This is doesn't work - it's my problem =)
  <el-option
   v-for="cl in users"
   :key="cl"
   :label="cl"
   :value="cl">
  </el-option>
 </el-select>
 <el-input-number v-model="item.damage"></el-input-number> // It's okey, damage is changing.
</div>

Я уже пытался изменить v-модель на: 

v-model="item.key" // JSON after this
myJSON = {"User1": {"damage": "10000", "key": "User3"}, "User2": {"damage": "10000", "key": "User4"}}

v-model="myJSON[key]" // Have error
TypeError: Cannot read property 'myJSON' of undefined

v-model="myJSON[key]" // Same
TypeError: Cannot read property 'myJSON' of undefined

После выбора пользователя в <el-select> мне нужно что-то вроде этого: 

{"User2": {"damage": "10000"}, "User3": {"damage": "10000"}}

Или 

{"User3333": {"damage": "10000"}, "User312321": {"damage": "10000"}}

Но я на неправильном пути, пожалуйста, помогите.

1 Ответ

0 голосов
/ 31 марта 2019

Не уверен, что вы можете напрямую изменить ключ объекта с помощью v-модели, но есть обходной путь. 

<div id="app">
 <ol>
  <li v-for="(item, index) in myJSON_format2">
   {{item}}
   <input v-model="item.damage"/>
   <input v-model="item.key"/>
  </li>
 </ol>
</div>

new Vue({
 el: "#app",
 data: {
  myJSON: {"User1": {"damage": "10000"}, "User2": {"damage": "10000"}},
  myJSON_format2: []
 },
 methods: {
  change_myJSON_toFormat2 () {
    for (let i in this.myJSON) {
     this.myJSON_format2.push({ damage: this.myJSON[i].damage, key: i })
    }
  }
 },
 created () {
  this.change_myJSON_toFormat2()
 }
})

Пожалуйста, проверьте это здесь: https://jsfiddle.net/shivampesitbng/dync94kt/24/

  • Обход:
    1. Изменил ds myjson на массив obj
    2. зациклил arr с v-for в vue-template
    3. изменил ключ пользователя, когда вы меняли ключ повреждения.
...