根据 json 文件动态显示选择、复选框、日期选择器等
display selection, checkboxes, datepicker, etc. dynamically based on json file
对我之前的一个问题追加提问
我正在根据我的 json 文件动态显示输入字段 - 现在我想根据它们的组显示选择、复选框和日期选择器。
我如何解决这个问题 - 我需要将这些元素推送到 computedJSON 中,但是例如写入选择 options: item.selection
是行不通的。
模板:
<table>
<tbody>
<tr v-for="(group, key) in getComputedJson" :key="key">
<div v-for="(item, indexer) in group" :key="indexer">
<b-form-input v-if="item.type" :type="item.type"></b-form-input>
<b-form-select v-if="item.selection" :options="item.selection"></b-form-select>
<b-form-checkbox-group v-if="item.checkbox" :options="item.checkbox"></b-form-checkbox-group>
<b-form-datepicker v-if="item.date"></b-form-datepicker>
</div>
</tr>
</tbody>
</table>
脚本:
<script>
export default {
computed: {
getComputedJson() {
const computedJson = {};
this.json.forEach(item => {
if(!computedJson[item.group]) {
computedJson[item.group] = [];
computedJson[item.group].push({label: item.label, type: item.type}); //Need to input here my selection, checkbox and datepicker
} else {
computedJson[item.group].push({label: item.label, type: item.type}); //Here too
}
}
return computedJson;
}
</script>
新 json:
[
{
"label": "Input 1",
"type": "text",
"group": "Test1"
},
{
"label": "Input 2",
"type": "text",
"group": "Test2"
},
{
"label": "Input 3",
"type": "text",
"group": "Test3"
},
{
"label": "Input 4",
"type": "number",
"group": "Test1"
},
{
"label": "Selection",
"selection": [
{ "text": "Selection 1" },
{ "text": "Selection 2" },
{ "text": "Selection 3" }
],
"group": "Test2"
},
{
"label": "Checkbox",
"selection": [
{ "text": "Checkbox 1" },
{ "text": "Checkbox 2" },
{ "text": "Checkbox 3" }
],
"group": "Test1"
},
{
"label": "Date",
"date": "yes",
"gruppe": "Test3"
}
]
根据您的新 json 尝试更改 v-if
和 options
属性中的条件,如下所示
<table>
<tbody>
<tr v-for="(group, key) in getComputedJson" :key="key">
<div v-for="(item, indexer) in group" :key="indexer">
<b-form-input v-if="item.type" :type="item.type"></b-form-input>
<b-form-select v-if="item.label === 'Selection'" :options="item.selection"></b-form-select> // change added
<b-form-checkbox-group v-if="item.label === 'Checkbox'" :options="item.selection"></b-form-checkbox-group> // change added
<b-form-datepicker v-if="item.date"></b-form-datepicker>
</div>
</tr>
</tbody>
</table>
修改了计算结果属性
<script>
export default {
computed: {
getComputedJson() {
const computedJson = {};
this.json.forEach(item => {
if(!computedJson[item.group]) {
computedJson[item.group] = [];
if(item.label === 'Checkbox' || item.label === 'Selection') {
computedJson[item.group].push({label: item.label, selection: item.selection, type: item.type}); // Provided you should have the options in item.selection
} else {
computedJson[item.group].push({label: item.label, type: item.type});
} else {
if(item.label === 'Checkbox' || item.label === 'Selection') {
computedJson[item.group].push({label: item.label, selection: item.selection, type: item.type}); // Provided you should have the options in item.selection
} else {
computedJson[item.group].push({label: item.label, type: item.type});
}
}
}
return computedJson;
}
</script>
对我之前的一个问题追加提问
我正在根据我的 json 文件动态显示输入字段 - 现在我想根据它们的组显示选择、复选框和日期选择器。
我如何解决这个问题 - 我需要将这些元素推送到 computedJSON 中,但是例如写入选择 options: item.selection
是行不通的。
模板:
<table>
<tbody>
<tr v-for="(group, key) in getComputedJson" :key="key">
<div v-for="(item, indexer) in group" :key="indexer">
<b-form-input v-if="item.type" :type="item.type"></b-form-input>
<b-form-select v-if="item.selection" :options="item.selection"></b-form-select>
<b-form-checkbox-group v-if="item.checkbox" :options="item.checkbox"></b-form-checkbox-group>
<b-form-datepicker v-if="item.date"></b-form-datepicker>
</div>
</tr>
</tbody>
</table>
脚本:
<script>
export default {
computed: {
getComputedJson() {
const computedJson = {};
this.json.forEach(item => {
if(!computedJson[item.group]) {
computedJson[item.group] = [];
computedJson[item.group].push({label: item.label, type: item.type}); //Need to input here my selection, checkbox and datepicker
} else {
computedJson[item.group].push({label: item.label, type: item.type}); //Here too
}
}
return computedJson;
}
</script>
新 json:
[
{
"label": "Input 1",
"type": "text",
"group": "Test1"
},
{
"label": "Input 2",
"type": "text",
"group": "Test2"
},
{
"label": "Input 3",
"type": "text",
"group": "Test3"
},
{
"label": "Input 4",
"type": "number",
"group": "Test1"
},
{
"label": "Selection",
"selection": [
{ "text": "Selection 1" },
{ "text": "Selection 2" },
{ "text": "Selection 3" }
],
"group": "Test2"
},
{
"label": "Checkbox",
"selection": [
{ "text": "Checkbox 1" },
{ "text": "Checkbox 2" },
{ "text": "Checkbox 3" }
],
"group": "Test1"
},
{
"label": "Date",
"date": "yes",
"gruppe": "Test3"
}
]
根据您的新 json 尝试更改 v-if
和 options
属性中的条件,如下所示
<table>
<tbody>
<tr v-for="(group, key) in getComputedJson" :key="key">
<div v-for="(item, indexer) in group" :key="indexer">
<b-form-input v-if="item.type" :type="item.type"></b-form-input>
<b-form-select v-if="item.label === 'Selection'" :options="item.selection"></b-form-select> // change added
<b-form-checkbox-group v-if="item.label === 'Checkbox'" :options="item.selection"></b-form-checkbox-group> // change added
<b-form-datepicker v-if="item.date"></b-form-datepicker>
</div>
</tr>
</tbody>
</table>
修改了计算结果属性
<script>
export default {
computed: {
getComputedJson() {
const computedJson = {};
this.json.forEach(item => {
if(!computedJson[item.group]) {
computedJson[item.group] = [];
if(item.label === 'Checkbox' || item.label === 'Selection') {
computedJson[item.group].push({label: item.label, selection: item.selection, type: item.type}); // Provided you should have the options in item.selection
} else {
computedJson[item.group].push({label: item.label, type: item.type});
} else {
if(item.label === 'Checkbox' || item.label === 'Selection') {
computedJson[item.group].push({label: item.label, selection: item.selection, type: item.type}); // Provided you should have the options in item.selection
} else {
computedJson[item.group].push({label: item.label, type: item.type});
}
}
}
return computedJson;
}
</script>