时间戳

首页 > 解决方案 > 如何在 bootsrap 网格系统中使用块 Vue Js？

javascript - 如何在 bootsrap 网格系统中使用块 Vue Js？

问题描述

这是代码

我已经阅读过类似的其他问题，但不明白

我正在尝试每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>

标签： javascriptbootstrap-4vuejs2vue-component

解决方案

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

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

为此，您可以使用一个计算属性，将原始数组分块成一个成对的数组。有很多方法可以将数组分块，我个人只是使​​用了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>

推荐阅读