动态创建输入框值保存异常：无法存入modulo.descripcion

Hey there! Let's figure out why you're only getting the initial value in modulo.descripcion instead of the updated input values—your addFields() button is a big clue here. Dynamic form fields often cause this kind of issue because they don't automatically hook into your data model unless you explicitly set that up. Here are the most common fixes based on your scenario:

1. If You're Using Vanilla JavaScript (No Framework) #

The problem is likely that your dynamically added inputs aren't linked to modulo.descripcion at all. Static inputs might have been set up to update the variable on load, but new fields added via addFields() don't trigger any updates. Here's how to fix your addFields() function to keep modulo.descripcion in sync:

First, update your addFields() to add input event listeners to new fields, and collect values from all relevant inputs whenever any of them change:

function addFields() {
  // Get the container where new inputs will be added
  const formGroup = document.querySelector('.form-group.col-md-10');
  
  // Create the new input element
  const newInput = document.createElement('input');
  newInput.type = 'text';
  newInput.className = 'form-control input-sm';
  newInput.style.marginBottom = '3px';
  newInput.placeholder = 'Nueva entrada de descripción';
  
  // Add an input listener to update modulo.descripcion whenever this field changes
  newInput.addEventListener('input', updateModuloDescripcion);
  
  // Append the new input to the form group
  formGroup.appendChild(newInput);
  
  // Trigger an initial update to include the new empty field (optional)
  updateModuloDescripcion();
}

// Helper function to collect all input values and update modulo.descripcion
function updateModuloDescripcion() {
  // Grab all the relevant input fields (adjust selector if needed)
  const allInputs = document.querySelectorAll('.form-group.col-md-10 .form-control.input-sm');
  
  // Collect non-empty values, trim them, and join into a single string (or use an array if preferred)
  modulo.descripcion = Array.from(allInputs)
    .map(input => input.value.trim())
    .filter(val => val !== '')
    .join(', ');
}

// Don't forget to add the listener to your initial input too!
document.querySelector('.form-group.col-md-10 .form-control.input-sm').addEventListener('input', updateModuloDescripcion);

This way, every time any input (initial or dynamic) changes, modulo.descripcion gets updated with the latest combined values.

2. If You're Using a Framework (Vue, Angular, React) #

If you're using a frontend framework, the issue is that dynamic fields aren't using the framework's reactive binding. Let's use Vue as an example since it's common for form scenarios:

Step 1: Use a Reactive Array for Multiple Descriptions #

Instead of a single modulo.descripcion string, use an array to hold multiple values (this makes dynamic fields easier to manage):

// In your Vue component's data
data() {
  return {
    modulo: {
      descripciones: [''] // Start with one empty field
    }
  };
}

Step 2: Render Fields with v-for #

Update your HTML to use v-for to render all fields (initial and dynamic) with proper reactive binding:

<div class="row">
  <div class="form-group col-md-10">
    <label for="codigoInput" class="control-label">Descripción</label>
    <button type="button" @click="addFields" class="btn btn-default btn-sm" style="margin-bottom: 5px">Agregar campos</button>
    
    <!-- Render all fields using v-for -->
    <div v-for="(desc, index) in modulo.descripciones" :key="index" style="margin-bottom: 3px">
      <input type="text" class="form-control input-sm" v-model="modulo.descripciones[index]">
    </div>
  </div>
</div>

Step 3: Update addFields() to Add to the Reactive Array #

// In your Vue component's methods
methods: {
  addFields() {
    this.modulo.descripciones.push(''); // Adds a new empty field reactively
  }
}

When you need to save, you can convert the array to a string (if your backend expects that) like this:

const descripcionString = this.modulo.descripciones.filter(val => val.trim()).join(', ');
// Send descripcionString to your backend, or assign it to modulo.descripcion if needed

Quick Check to Rule Out Simple Mistakes #

• Make sure you're not accidentally overwriting modulo.descripcion with the initial value somewhere in your submit logic.
• Verify that modulo is a global variable (if using vanilla JS) or properly reactive (if using a framework).

内容的提问来源于stack exchange，提问作者Martin Zarza