HTML表单中的关联数组阻止提交

Question

我有一个关联数组编码成这样的 HTML 表单（使用 Vue）

// Code:
<div v-for="(obj, index) in arrFriends" :key="index">
 <input v-for="(postID, friendID, index) in obj" type="hidden" :name="addString(friendID)" :key="index" :value="postID">
</div>

// Example of what type of input this code creates:
<input data-v-496dab8d type="hidden" name="arrFriends[4]" value="10">

我可能会误解使用 HTML 表单构造关联数组，但是当有这种类型的输入时，表单提交只会导致页面重新加载，而不是实际提交表单。

希望有人能告诉我我到底做错了什么，因为从我查看的所有文档中我看不出为什么这不应该工作。

Answer 1

我不知道你用v-for 迭代的object 的结构，但是从变量的命名来看，你似乎没有以正确的方式使用它。 （在我的 sn-ps 中，我只使用了一个 obj，但如果你遍历一个包含 objects 的数组，它也是一样的。）

new Vue({
  el: "#app",
  data: {
    obj: {
      postId: "postId-1",
      friendId: "friendId-2",
      thirdId: "thirdId-3"
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <ul>
    <li
      v-for="(postId, friendId, index) in obj"
      :key="index"
    >
      {{ `${ friendId }: ${ postId }` }}
    </li>
  </ul>
</div>

从上面的 sn-p 可以看出，(postId, friendId, index) 不返回 postId、friendId 属性的值 obj，而是在每次迭代时获得新值的变量：

• postId => obj 的当前迭代值
• friendId => 在obj 的当前迭代中的密钥

如果您只需要obj.postId 和obj.friendId，则不需要v-for 来迭代对象：

new Vue({
  el: "#app",
  data: {
    obj: {
      postId: "postId-1",
      friendId: "friendId-2",
      thirdId: "thirdId-3"
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  {{ `${ obj.friendId } - ${ obj.postId }` }}
</div>