Question

这是代码

我已经已经阅读过有关此类问题的其他信息，但不了解

我正尝试在每 2 个项目

中添加引导行

Vue.component('col-md-6', {
  props: ['data'],

  template: '<div class="col-md-6"><div class="form-group"> <label :for=" data.inid "> {{ data.label }}  </label><input type=""  :disabled="data.dsbl" class="form-control" :id=" data.inid " :placeholder=" data.label "> </div> </div>',

})
var inputgen = new Vue({
  el: "#container",
  data: {
    inputs: [{
        id: 0,
        type: '',
        inid: 'no',
        dsbl: true,
        label: 'Ariza №'
      },
      {
        id: 1,
        type: '',
        inid: 'rw',
        status: "",
        label: 'Asosiy menu'
      },
      {
        id: 2,
        type: '',
        inid: 'wer',
        status: "",
        label: 'Asosiy menu'
      },
      {
        id: 3,
        type: '',
        inid: 'w4er',
        status: "",
        label: 'Asosiy menu'
      },
    ]



  },
  
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div class="row" id="container" >
  <col-md-6 v-for="item in inputs" v-bind:data="item" v-bind:key="item.id"></col-md-6>
</div>

Answer 1

如果我正确理解，您希望它每2个项目生成一个新的<div class="row">。这样您就可以自动（简化）此结构。

<row>
  <col></col>
  <col></col>
</row>
<row>
  <col></col>
  <col></col>
</row>

为此，您可以使用将原始数组分块成对的数组的计算属性。有很多方法可以对数组进行分块，就我个人而言，我只是使用了first result from google。

将数组分块后，您会得到类似的结果。

[ [object, object], [object, object] ]

Vue.component('col-md-6', {
  props: ['data'],

  template: '<div class="col-md-6"><div class="form-group"> <label :for=" data.inid "> {{ data.label }}  </label><input type=""  :disabled="data.dsbl" class="form-control" :id=" data.inid " :placeholder=" data.label "> </div> </div>',

})
var inputgen = new Vue({
  el: "#container",
  computed: {
    chunkedInputs() {
      return this.chunkArray(this.inputs, 2)
    }
  },
  methods: {
    chunkArray(myArray, chunk_size){
      var index = 0;
      var arrayLength = myArray.length;
      var tempArray = [];

      for (index = 0; index < arrayLength; index += chunk_size) {
          myChunk = myArray.slice(index, index+chunk_size);
          tempArray.push(myChunk);
      }

      return tempArray;
    }
  },
  data: {
    inputs: [{
        id: 0,
        type: '',
        inid: 'no',
        dsbl: true,
        label: 'Ariza №'
      },
      {
        id: 1,
        type: '',
        inid: 'rw',
        status: "",
        label: 'Asosiy menu'
      },
      {
        id: 2,
        type: '',
        inid: 'wer',
        status: "",
        label: 'Asosiy menu'
      },
      {
        id: 3,
        type: '',
        inid: 'w4er',
        status: "",
        label: 'Asosiy menu'
      },
    ]
  }
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="container">
  <div class="row" v-for="chunk in chunkedInputs">
    <col-md-6 v-for="item in chunk" v-bind:data="item" v-bind:key="item.id"></col-md-6>
  </div>
</div>

如何在Bootsrap网格系统中使用块Vue Js？

1 个答案: