这是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
},
});
答案 0 :(得分：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是动态生成的，具有不同的值。
答案 1 :(得分：0)
你可能会想到这个错误。想要给出事物ID是一个迹象，表明你还没有考虑过。 Vue不需要ID。任何重复元素应该在它自己的组件中，所以你会想要一个问题组件。然后，首先考虑您的商店，然后构建界面以显示信息。因此，如果您正在编写一个测试应用程序，靠近商店的顶层，您将需要一系列问题，每个问题都有一系列答案......
var vueStore = {
questions : [
{ questionText : 'qqdf', answers : [] },
{ questionText : 'gj', answers : [] },
{ questionText : 'zerh', answers : [] }
]
}