v-for логика в vuejs для динамической сетки изображений - PullRequest
Новая
       7

v-for логика в vuejs для динамической сетки изображений

0 голосов
/ 05 мая 2018

Поэтому я продолжал набрасывать алгоритмы, чтобы посмотреть, как это будет работать. Продолжал бить меня по голове о клавиатуру, потому что, честно говоря, ничего не работает. В основном, жестко закодированный HTML выглядит так: 

    <div class="row"> 
        <div class="column">
            <a href="products.html#drinks"><div id="drinks">
                <h2>Drinks</h2>
            </div></a>
        </div>
        <div class="column">
            <a href="products.html#preppedfood"><div id="preppedfood">
                <h2>Prepped Food</h2>
            </div></a>
        </div>
        <div class="column">
            <a href="products.html#coffee"><div id="coffee">
                <h2>Coffee Machines</h2>
            </div></a>
        </div>
        <div class="column">
            <a href="products.html#snacks"><div id="snacks">
                <h2>Snacks</h2>
            </div></a>
        </div>
    </div>
    <div class="row"> 
        <div class="column">
            <a href="products.html#nuts"><div id="nuts">
                <h2>Nuts of All Kinds</h2>
            </div></a>
        </div>...till the last div class="row" and it's column divs

Итак, HTML работает нормально, вот скриншот: Вот как я хочу, чтобы это выглядело!

Но используя VueJS, чтобы я мог "СУШИТЬ" свою разметку, я использую директиву v-for, как это в компоненте Prods.vue. Вот разметка шаблона: 

   <div class="row" v-for="(data, index) in images" v-bind:key="data" v-if="data.ImageId%4 == 0">
  <h1>{{index}}</h1>
  <div 
    class="column" 
    v-for="data in images" 
    v-bind:key="data" 
    v-if="computedIndex(index) *4 >= index && index < (computedIndex(index)+1) / 4"
    v-lazy-container="{ selector: 'data' }"
  >  
    <a :href="'products/#'+data.Name">
      <h4>{{data.H2}}</h4>
      <img :src="'../../../static/products/'+data.Name+'.png'" :alt="data.Name+'.png'" />
    </a>
  </div>
</div>

И сценарий: 

    <script>
  import Prods from '../../../other/jsons/products.json'
  import VueLazyload from 'vue-lazyload'
  export default {
    data() {
      return {images: Prods}
    },
    methods: {
      computedIndex(index) {
        return Math.trunc(index/4)
      }
    }
  }
  //v-for in row
  //v-for in column
</script>

И вот что появляется вместо: введите описание изображения здесь

1 Ответ

0 голосов
/ 05 мая 2018

Вместо того, чтобы манипулировать индексами, мне кажется более простым вычислить форму вашего массива в соответствии с DOM: 

computed:
  imageRows () {
    return this.images.reduce((acc, n, i) => {
      i % 4 ? acc[acc.length - 1].push(n) : acc.push([n])
      return acc
    }, [])
  }

Будет использоваться что-то вроде этого: 

<table>
  <tr v-for="(imageRow, i) in imageRows" :key="i">
    <td v-for="image in imageRow" :key="image">
      <foo/>
    </td>
  </tr>
</table>

(Ваши данные мне кажутся табличными, поэтому я показываю этот пример как <table>, но вы можете заменить его на <div>, если хотите, конечно.)

...