基于json文件动态显示选择、复选框、日期选择器等

Posted 2023-02-16

【中文标题】基于json文件动态显示选择、复选框、日期选择器等

【英文标题】：display selection, checkboxes, datepicker, etc. dynamically based on json file

【发布时间】：2021-11-26 18:03:46

【问题描述】：

我之前的问题的附加问题

我正在根据我的 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"
    
]

【参考方案1】：

根据您的新 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>

【讨论】：

谢谢 - 但我怎样才能把它推到我的桌子上呢？因为只有computedJson[item.group].push(label: item.label, type: item.type); 它不起作用..

检查编辑后的答案