Я хотел бы сохранить отдельные входные данные в существующем объекте в соответствии с определенной структурой, которую вы можете увидеть в файле JavaScript.
На данный момент входные данные сохраняются следующим образом:
question: {
examples: {
0: "First Input",
1: "Second Input",
2: "Third Input",
...
A: {
id: 1,
example: "",
selectedAnswer: null
},
B: {
id: 2,
example: "",
selectedAnswer: null
},
C: {
id: 3,
example: "",
selectedAnswer: null
},
D: {
id: 4,
example: "",
selectedAnswer: null
},
E: {
id: 5,
example: "",
selectedAnswer: null
},
F: {
id: 6,
example: "",
selectedAnswer: null
}
}
},
But I want it so:
question: {
examples: {
A: {
id: 1,
example: "First Input",
selectedAnswer: null
},
B: {
id: 2,
example: "Second Input",
selectedAnswer: null
},
C: {
id: 3,
example: "Third Input",
selectedAnswer: null
},
}
},
Я также очень хочу, чтобы объект строился динамически ... поэтому в зависимости от выбранного числа, чем больше объект должен быть ... не тем, чтобы там были пустые пробелы.
Я не знаю, как преобразовать количество входных данных в верхний регистр, чтобы я мог сохранить их в однобуквенном объекте.
Вот пример того, как это выглядит. И я надеюсь, что вы можете мне помочь.
new Vue({
el: "#app",
data: {
value: [String, Number, Object],
n: 0,
countExample: 0,
question: {
examples: {
A: {
id: 1,
example: "",
selectedAnswer: null
},
B: {
id: 2,
example: "",
selectedAnswer: null
},
C: {
id: 3,
example: "",
selectedAnswer: null
},
D: {
id: 4,
example: "",
selectedAnswer: null
},
E: {
id: 5,
example: "",
selectedAnswer: null
},
F: {
id: 6,
example: "",
selectedAnswer: null
}
}
},
methods: {
updateValue(event) {
this.$emit("input", event.target.value);
}
}
}
});
<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<div id="app">
<div id="create-question">
<div class="form-group">
<label>Anzahl Examples:</label>
<select v-bind:options="question.examples" class="form-control" v-on:change="updateValue" v-model="countExample">
<option v-for="option in question.examples" v-bind:value="option.id" v-bind:key="option.id" :selected="option === value">{{ option.id }}</option>
</select>
</div>
<div v-bind:key="n" v-for="n in parseInt(countExample)">
<div class="form-group">
<input class="form-control" v-model="question.examples[n - 1]" />
</div>
</div>
</div>
</div>
<!-- Scripts -->
</body>
</html>