javascript - Vue.js : How to generare multiple dynamic ID's with a defined pattern

Question

这是 Function that generates multiple dynamic ID's with a defined pattern 的双胞胎帖子.
这样做的原因是我正在创建一个我应该在其中使用 Vue.js 的应用程序。我正在学习，第一个问题的解决方案中的语法非常接近它在 Vue 模板中的外观，我决定尝试重新编码。

完成的 Vue 组件应该像这样工作 jsFiddle (来自@DeepuReghunath)。我如何实现这一目标？ ID 必须是动态的，单选按钮名称也是如此!

我在执行此操作时遇到的一个问题是生成新 div 的“添加问题”按钮无法按预期工作。可以看到，同一个类中既有javaScript，也有Vue。我知道这不是最终的，但由于我无法使用 Vue 隐藏和显示根组件，因此没有什么可做的。

在这里你可以看到 jsFiddle使用与下面相同的代码!

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
        },
    });

Answer 1

对模板和vue 对象进行了一些更改。我这边额外添加了变量 dynamicID 、count 和 addElement() 方法来实现这一点。

 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/

现在问题编号和问题输入字段 id 是动态生成的，具有不同的值。