Vue.js: How to generare multiple dynamic ID's

问题:

This is a twin post to Function that generates multiple dynamic ID's with a defined pattern.
The reason for this is that I am creating an application in which I am supposed to use Vue.js. I am learning on the fly, the syntax in the solution of the first question was very close to how it would look in a Vue template, I decided that I should try to recode it.

The finished Vue Component should work like this jsFiddle (by @DeepuReghunath). How do I to achieve this? The ID's has to be dynamic, so does the radio button names!

One of the problems I encountered while doing this is that the Add Question button, that generates new divs doesn't work as intended. As you can see, there is both javaScript and Vue in the same class. I know that it is not ultimate, but since I cant hide and show root components with Vue there isn't much to do about it.

Here you can see the jsFiddle with the same code as bellow!

HTML

<div id="singleQuestionModule">
    <form class="form-group">
        <div class="d-flex justify-content-center">
            <fieldset class=" form-group row">
                <div id="testContainer">
                    <testcomponent></testcomponent>
                </div>
            </fieldset>
        </div>
    </form>
</div>

Vue.js + JavaScript

    let name = 1;
    let theTitle;

    function testDetails() {
        theTitle = document.getElementById("titleInput").value;
        document.getElementById("testH1").innerHTML = theTitle;
        document.getElementById("titleLabel").innerHTML = "Do you want to change the title?";
        $("#removableText").hide();
        $("#singleQuestionModule").show();
        $("#tCreateTest").css('height', '50vh');

        let aQuestion = document.getElementById('addQuestion');
        if (aQuestion.style.display ==

            = 'none') {
            aQuestion.style.display = 'block';
        }
    }

    Vue.component('testcomponent', {
        template: `
<div>
    <form class="form-group">
        <div class="d-flex justify-content-center">
            <fieldset class=" form-group row">
                <span class="module">
                    <div class="input-group input-group">
                        <label id="wQuestionLabel" class="form-control-label" for="wQuestion">Question:</label>
                    </div>
                    <div class="form-group row">
                        <div class="input-group input-group">
                         <!-- The Question Inputfield that needs ID-->

                            <input type="text" class="form-control" :id="testTitle + 'Q' + name" style="width: 540px;">
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="input-group input-group">
                            <label id="questionOptions" class="form-control-label"
                                   for="wQuestion">Enter avaible options:</label>
                        </div>
                    </div>
    <!-- The radiobuttons and option inputfields that needs ID's-->

                    <div class="form-group row">
                        <div class="input-group input-group">
                  <span class="input-group-addon">
                    <input type="radio" :name="testTitle + 'rg' + name" :id="testTitle + 'Q' + name + 'Q'" value="1" aria-label="">
                  </span>
                            <input type="text" :id="testTitle + 'Q' + name + 'input' + '4'" class="form-control" aria-label="" style="width: 540px;"> </div>
                    </div>

                    <div class="form-group row">
                        <div class="input-group input-group">
                  <span class="input-group-addon">
                                        <input type="radio" :name="testTitle + 'rg' + name" :id="testTitle + 'Q' + name + 'Q'" value="2" aria-label="">
                  </span>
                            <input type="text" :id="testTitle + 'Q' + name + 'input' + '4'" class="form-control" aria-label="" style="width: 540px;"> </div>
                    </div>
                    <div class="form-group row">
                        <div class="input-group input-group">
                  <span class="input-group-addon">
                                       <input type="radio" :name="testTitle + 'rg' + name" :id="testTitle + 'Q' + name + 'Q'" value="3" aria-label="">
                  </span>
                            <input type="text" :id="testTitle + 'Q' + name + 'input' + '4'" class="form-control" aria-label="" style="width: 540px;"> </div>
                    </div>
                    <div class="form-group row">
                        <div class="input-group input-group">
                  <span class="input-group-addon">
                    <input type="radio" :name="testTitle + 'rg' + name" :id="testTitle + 'Q' + name + 'Q'" value="4" aria-label="">
                  </span>
                            <input type="text" :id="testTitle + 'Q' + name + 'input' + '4'" class="form-control" aria-label="" style="width: 540px;">
                        </div>
                    </div>
                </span>
                <span class="options-label"></span>
                <br>
                <div class="form-group row">
                    <div class="btn-group" data-toggle="buttons">
                        <label class="btn btn-success" id="radioAddQuestion">
                            <input type="radio" @click="name++" name="options" autocomplete="off">Add
                            Question</label>

                        <label class="btn btn-success">
                            <input type="radio" name="options" id="radioSaveTest" value="saveTest()" autocomplete="off">Save
                            Test </label>
                    </div>
                </div>
            </fieldset>
        </div>
    </form>
</div>
    `,

        data: function() {
            return {
                name: name,
                testTitle: theTitle,
            }
        }

    });

    new Vue({
        el: '#testContainer',
        data: {
            seen: true
        },
    });

回答1:

Made some changes to the template and vue object. variable dynamicID ,count and addElement() method are added extra from my side to achieve this.

 data: function() {
    return {
        testTitle: "onlineexam",
        input: "input",
        rg: "rg",
        Q: "Q",
        O: "O",
        one: "1",
        two: "2",
        three: "3",
        four: "4",
        name:dynamicID
    }
}});



new Vue({
    el: '#testContainer',
    data: {
        seen: true,
        count:1
    },
    methods: {
    addElement: function () {

        dynamicID++;
        this.count++;

    }}
});

Jsfiddle :https://jsfiddle.net/d60j70j6/

Now the question number and question input field id are dynamically generating with different value.

回答2:

You might be thinking about this wrong. Wanting to give things ids is a sign that you're not thinking vue yet. Vue doesn't need ids. Anything that's a repeating element should be in its own component, so you'll be wanting a question component. Then, think about your store first, then build the interface to present the info. So if you're writing a test app, near the top level of your store, you'll want an array of questions, each question having an array of answers...

var vueStore = {
    questions : [
        { questionText : 'qqdf', answers : [] },
        { questionText : 'gj', answers : [] },
        { questionText : 'zerh', answers : [] }
    ]
}