동적 위치에 Vue 구성 요소를 삽입하는 방법

동적 위치에 Vue 구성 요소를 삽입하는 방법

한 페이지에 여러 줄과 여러 열의 패널(제품)이 많이 보인다.나는 Vue 2를 사용하고 있고 패널은 부품이다.이제 패널을 클릭하면 해당 패널의 행 아래에 있는 패널에 대한 세부 정보를 표시하십시오.이것은 구글 이미지 검색과 비슷하다.

예를 들어 위의 이미지에서 s1, s2 또는 s3 중 하나를 클릭하면 s3(이 행의 마지막 요소) 다음에 큰 패널이 나타난다.마찬가지로 s4 또는 s5를 클릭할 경우 s5 다음에 큰 패널이 나타난다.

** 연속되는 항목 수는 화면 크기에 따라 달라진다.

행의 마지막 요소를 찾고 해당 요소 뒤에 구성 요소를 삽입하는 방법

이것은 당신의 질문에 직접적으로 대답하지 않지만, 기대되는 행동을 실행해야 한다.여기 jsfiddle이 있다.

템플릿:

<div id="vue-instance">
  <ul class="item-list">
    <li class="item" v-for="item in inventory" @click="dispalyDetails(item)">
      <div class="header">{{ item.name }} - ${{ item.price }}</div>
      <div v-if="item.displayed" class="details">
        <div class="details__inner">
          {{ item.details }}
        </div>
      </div>
    </li>
  </ul>
</div>

부에:

var vm = new Vue({
  el: '#vue-instance',
  data: {
    inventory: [
      {name: 'MacBook Air', price: 1000, details: 'Lorem ipsum', displayed: false},
      {name: 'MacBook Pro', price: 1800, details: 'Lorem ipsum', displayed: false},
      {name: 'Lenovo W530', price: 1400, details: 'Lorem ipsum', displayed: false},
      {name: 'Acer Aspire One', price: 300, details: 'Lorem ipsum', displayed: false},
      {name: 'Aspire One', price: 700, details: 'Lorem ipsum', displayed: false}
    ]
  },
  methods: {
    deselectItems() {
        this.inventory.forEach((item) => {
        item.displayed = false;
      });
    },
    dispalyDetails(item) {
        if (!item.displayed) {
        this.deselectItems();
      }

        item.displayed = !item.displayed;
    }
  }
});

Scss:

.item-list {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 80%;
  margin: 0 auto;
}

.item {
  width: 33.33%; // adjust accordingly in mq
  box-sizing: border-box;
}

.header {
  box-sizing: border-box;
  padding: 10px;
}

.details {
  border: 1px solid red;
  min-height: 200px;
}

.details__inner {
  position: absolute;
  left: 0;
  width: 100%;
  min-height: 200px;
  border: 1px solid green;
}

구성 요소를 정렬하려면 구성 요소가 차례로 표시됨.어레이에 이러한 모든 구성 요소가 있다고 가정해 봅시다. 그러면 해당 구성 요소를 논리적으로 배열할 수 있고, 특수 속성을 사용할 수 있습니다, 즉 이러한 구성 요소를 렌더링하는 것입니다.

여기 샘플에서 나는 일련의 구성 요소들을 가지고 있고,v-for다음 항목을 차례로 제공하려면:

여기서 만지작거려라.

HTML:

<div id="app">
  <h1>
  Following are the components
  </h1>
  <div v-for="comp in compArray" :is="comp"></div>
  <br>
  <button @click="resuffle">
     Resuffle
  </button>
</div>

<template id="comp1">
  <div>
    <span>This is component 1</span>
  </div>
</template>

<template id="comp2">
  <div>
    <span>This is component 2</span>
  </div>
</template>

<template id="comp3">
  <div>
    <span>This is component 3</span>
  </div>
</template>

JS:

Vue.component('comp1', {
  template: '#comp1', 
})

Vue.component('comp2', {
  template: '#comp2', 
})
Vue.component('comp3', {
  template: '#comp3', 
})

new Vue({
    el: '#app',
  data: {
    compArray: ['comp1', 'comp2', 'comp3']
  },
  methods: {
    resuffle: function() {
       this.compArray.push(this.compArray[1])
       this.compArray.splice(1,1)
    }
  },
})

참조URL: https://stackoverflow.com/questions/41415523/how-to-insert-vue-component-in-dynamic-position