Question

嗨，似乎不是迭代和编辑对象（不是数组）的最佳做法。但有没有一种最好的方法可以像使用对象数组一样轻松实现它？

new Vue({
  el: '#app',
  data: {
    object1: {
      'first': 'second'
    },
    object2: [
      {'key': 'first', 'value': 'second' }
    ]
}})

-

<script src="https://unpkg.com/vue"></script>

<div id="app">

  <!-- Is there a way to make it work? -->
  <!-- `k` value of object is not reactive(?) -->

  <div v-for="(v, k) in object1">
    <p> {{ k }} | {{ v }} </p>
    <input type="text" class="form-control" v-model="k">
    <input type="text" class="form-control" v-model="object1[k]">
  </div>

  <br />

  <!-- This works fine like a charm -->

  <div v-for="item in object2">
    <p> {{ item }} </p>
    <input type="text" class="form-control" v-model="item.key">
    <input type="text" class="form-control" v-model="item.value">
  </div>

</div>

Answer 1

第一个问题是当你编辑

时

<input type="text" class="form-control" v-model="k">

成为k密钥，您只需编辑k字符串。

它不会反映在原始对象中，因为它不是对属性名称的引用。它只是一个字符串（从属性的名称中提取）。

Answer 2

这是一件非常愚蠢的事情，但是如果你真的想将对象的属性名称绑定到输入，你可以这样做：

＆＃13;

NullPointerException

＆＃13;

new Vue({
  el: '#app',
  data: {
    object1: {
      'first': 'second'
    },
    object2: [
      {'key': 'first', 'value': 'second' }
    ]
  },
  methods: {
    updateObject(e, old, prop) {
      let val = this[prop][old];
      this.$delete(this[prop], old);
      this.$set(this[prop], e.srcElement.value, val);
    }
  }
})

＆＃13;

如何像数组集合一样编辑对象

2 个答案: