Ответы пользователя по тегу Vue.js
  • Как можно изменить порядок отрисовки компонентов Vue?

    netwood
    @netwood
    Эксперт в Web Разработке
    Привет!
    Можно через computed переменную сделать, концептуальный пример ниже.
    <template>
    <div>
    	<div v-for="flow_item in flow_items" :key="flow_item.id">
    		<div v-if="flow_item.type == 'cards'">
    			<Card v-for='product in flow_item.items' />
    		</div>
    		<Selection v-else-if="flow_item.type == 'selection'"/>
    	</div>
    </div>
    </template>


    export default {
    	computed: {
    		flow_items(){
    			let result = []
    
    			let products_chunk_1 = []
    			let products_chunk_2 = []
    
    			for (let i = 0; i < this.products.length; i++) {
    				
    				if (this.products.length/2 >= i) {
    					products_chunk_1.push(this.products[i])
    				} else {
    					products_chunk_2.push(this.products[i])
    				}
    			}
    
    			result.push({
    				id: 'flow-item-0',
    				type: 'cards',
    				items: products_chunk_1
    			})
    
    			result.push({
    				id: 'flow-item-1',
    				type: 'selection'
    			})
    
    			result.push({
    				id: 'flow-item-2',
    				type: 'cards',
    				items: products_chunk_2
    			})
    
    			return result
    		}
    	}
    }
    Ответ написан
    1 комментарий