关于在Vue的v-for循环中使用v-model的技术咨询及代码示例

Hey there! Let’s break down your Vue code and cover best practices for using v-model within a v-for loop for your companion form fields.

First, let’s clean up your existing code snippet for clarity: #

<div v-for="(companion, key) in planForm.companions" :key="key">
  <div class="field">
    <label class="label">First Name</label>
    <div class="input-space">
      <input :name="'companion_first_name[' + key + ']'" type="text" v-model="companion.first_name">
    </div>
  </div>
  <div class="field">
    <label class="label">Last Name</label>
    <div class="input-space">
      <input :name="'companion_last_name[' + key + ']'" type="text" v-model="companion.last_name">
    </div>
  </div>
</div>

What’s working well here: #

• You’re correctly iterating over the planForm.companions array with v-for, and binding v-model directly to each companion’s properties—this will keep your form inputs synced with your component’s data state perfectly.
• The dynamic name attribute setup makes sense for form submission, as it will send data in a structured array format.

Quick optimizations & best practices: #

1. Simplify the name attribute with template literals
   Ditch string concatenation for cleaner, more readable ES6 template literals:

   <input :name="`companion_first_name[${key}]`" type="text" v-model="companion.first_name">
   

2. Use a unique key instead of the index (when possible)
   If each companion has a unique identifier (like an id), use that for the :key prop instead of the array index. This helps Vue track list items more efficiently, especially when adding/removing companions (avoids weird input value mismatches):

   <div v-for="(companion, key) in planForm.companions" :key="companion.id">
   

3. Ensure planForm.companions is properly initialized
   In your component’s data, initialize the array with at least one empty object (or as many as needed) to avoid reactivity issues:

   data() {
     return {
       planForm: {
         companions: [
           { first_name: '', last_name: '' }
         ]
       }
     }
   }
   

4. Add new companions reactively
   When adding a new companion to the array:

   • For Vue 2: Use this.$set to ensure the new object is reactive (Vue 2 can’t detect plain object additions to arrays automatically):

     addCompanion() {
       this.$set(this.planForm.companions, this.planForm.companions.length, {
         first_name: '',
         last_name: ''
       });
     }
     

   • For Vue 3: You can just push the object directly—Vue 3’s reactivity system handles this seamlessly:

     addCompanion() {
       this.planForm.companions.push({ first_name: '', last_name: '' });
     }
     

Common pitfalls to avoid: #

• Forgetting the :key prop: This can cause unexpected behavior when modifying the list (e.g., input values sticking to the wrong list items).
• Initializing companions as an object instead of array: v-for won’t iterate over an object correctly for this use case—stick to an array.
• Ignoring reactivity in Vue 2: If you push a plain object without $set, Vue won’t track changes to its properties, so v-model won’t update the data as expected.

That should cover everything you need to make this form setup work smoothly. If you run into specific issues like submission errors or reactivity bugs, feel free to dive deeper!

内容的提问来源于stack exchange，提问作者Mango D