面试题：Vue中如何在嵌套表单中双向绑定数组内对象的属性

Question

假设有一个嵌套表单结构，外层是一个用户信息表单，内层包含一个爱好数组，每个爱好对象又有名称和描述两个属性。请描述如何使用Vue的表单绑定实现对爱好数组内每个对象属性的双向绑定，并给出关键代码示例。

Answer 1

1. 实现思路：

   • 在Vue中，对于数组中的对象属性双向绑定，我们可以使用v - model指令。由于爱好数组是内层表单结构，需要通过遍历数组来为每个爱好对象的属性创建v - model绑定。
   • 对于v - model绑定到对象属性，Vue能够自动追踪对象属性的变化并更新视图。

2. 关键代码示例：

   • 首先是Vue实例的HTML部分：

<template>
  <form>
    <!-- 用户信息表单其他部分省略 -->
    <div v - for="(hobby, index) in hobbies" :key="index">
      <label>爱好名称：</label>
      <input type="text" v - model="hobby.name">
      <label>爱好描述：</label>
      <input type="text" v - model="hobby.description">
    </div>
  </form>
</template>

• 然后是Vue实例的JavaScript部分：

export default {
  data() {
    return {
      hobbies: [
        { name: '', description: '' },
        { name: '', description: '' }
      ]
    };
  }
};

在上述代码中，通过v - for指令遍历hobbies数组，为每个爱好对象的name和description属性分别绑定了v - model，实现了双向绑定。当用户在输入框中输入内容时，hobbies数组中对应对象的属性值会更新；反之，当hobbies数组中对象属性值通过代码改变时，视图中的输入框内容也会相应更新。