Vue.js中如何按指定规则批量生成动态ID？

Got it, let's break this down. Since you're building a dynamic campus quiz app, the goal is to create structured, unique IDs that clearly tie each input/radio button to its parent question and option number. Here's a practical approach that works seamlessly with your existing ID candidate generator function:

1. Track Question Count for Unique Base Identifiers #

First, keep a simple counter to track how many questions you've added. This gives each question module a distinct base prefix, which is the foundation of your ID structure.

// Initialize counter (start at 1 for readability—adjust if you prefer 0-indexed)
let questionCounter = 1;

// Your existing ID candidate generator function (example shown)
function generateIdCandidate(baseName) {
  // Your custom logic here—e.g., add a short unique suffix to avoid collisions
  return `${baseName}-${Date.now().toString(16).slice(-4)}`;
}

2. Generate Structured IDs for Each Option Group #

When the "Add Question" button is clicked, create a parent div for the new question, then loop 4 times to generate each input-radio pair. Use a consistent naming pattern for IDs so you can easily trace which element belongs to which question and option later.

Example Implementation (Native JavaScript) #

// Attach click handler to your "Add Question" button
document.getElementById('add-question-btn').addEventListener('click', () => {
  // Create parent container for the new question
  const questionDiv = document.createElement('div');
  questionDiv.classList.add('question-module');
  questionDiv.id = `question-${questionCounter}`; // Optional but helpful for tracking

  // Loop to create 4 option groups (input + radio button)
  for (let optionNum = 1; optionNum <= 4; optionNum++) {
    // Create a base string for this option to keep IDs consistent
    const optionBase = `question-${questionCounter}-option-${optionNum}`;

    // Use your existing function to generate final unique IDs
    const inputId = generateIdCandidate(`${optionBase}-input`);
    const radioId = generateIdCandidate(`${optionBase}-radio`);

    // Build the option text input
    const optionInput = document.createElement('input');
    optionInput.type = 'text';
    optionInput.id = inputId;
    optionInput.placeholder = `Enter option ${optionNum} content`;

    // Build the "correct answer" radio button
    const correctRadio = document.createElement('input');
    correctRadio.type = 'radio';
    correctRadio.id = radioId;
    correctRadio.name = `question-${questionCounter}-correct-option`; // Same name = single selection per question

    // Add a label for the radio button (accessibility best practice)
    const radioLabel = document.createElement('label');
    radioLabel.htmlFor = radioId;
    radioLabel.textContent = `Mark as correct (Option ${optionNum})`;

    // Group elements into an option container
    const optionGroup = document.createElement('div');
    optionGroup.classList.add('option-group');
    optionGroup.append(optionInput, correctRadio, radioLabel);

    // Add the option group to the question div
    questionDiv.appendChild(optionGroup);
  }

  // Add the new question to your page's main questions container
  document.getElementById('questions-container').appendChild(questionDiv);

  // Increment counter for the next question
  questionCounter++;
});

3. Why This Pattern Works #

• Readability: IDs like question-2-option-3-input make it instantly clear this is the input field for the 3rd option of the 2nd question.
• Uniqueness: By combining the question counter, option number, and your generateIdCandidate function, you eliminate ID collisions even if users add/remove questions.
• Maintainability: If you need to access or save quiz data later, you can easily parse the ID to map inputs to their respective questions and options.

Quick Tips #

• If you add question deletion functionality, avoid relying solely on the incrementing counter (deleting question 2 then adding a new one would create another question-3). Instead, calculate the next question number by checking existing question div IDs, or use UUIDs for the question base ID.
• Always ensure radio buttons for the same question share the same name attribute—this enforces single selection per question, which is critical for quiz functionality.

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