Передать компонент внутри элемента vue-grid-layout - PullRequest
Новая
       7

Передать компонент внутри элемента vue-grid-layout

0 голосов
/ 07 февраля 2019

Пожалуйста, помогите мне понять, как передать импортированный компонент vue отдельного файла в элемент vue-grid-layout.

Я знаю, как передать простой HTML, как здесь: https://jsfiddle.net/gmsa/jw2mmmpq/1/ Но янеобходимо вставить другие компоненты с помощью кнопок и вызовов Axios и т. д.

HTML: 

<template>
  <div class="hello">
    <grid-layout
            :layout="layout"
            :col-num="12"
            :row-height="30"
            :is-draggable="true"
            :is-resizable="true"
            :vertical-compact="true"
            :margin="[10, 10]"
            :use-css-transforms="true"
    >

      <grid-item v-for="item in layout"
                 :x="item.x"
                 :y="item.y"
                 :w="item.w"
                 :h="item.h"
                 :i="item.i">
        <div v-html="item.c">
        </div>
        <Test></Test>
      </grid-item>
    </grid-layout>
  </div>
</template>

JS: 

import VueGridLayout from 'vue-grid-layout';
  import Test from './test.vue';
  import Test from './test2.vue';

  let a = `This needs to be another component, like Test`;
  let b = `This needs to be another component, like Test2`;

  var testLayout = [
    {"x":0,"y":0,"w":2,"h":2,"i":"0", "c": a},
    {"x":2,"y":0,"w":2,"h":4,"i":"1", "c": b}
  ];
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  components: {
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem,
    Test,
    Test2
  },
  data: function (){
    return {
      layout: testLayout
    }
  }
}

Не можете найти здесь какие-либо идеи:

https://github.com/jbaysolutions/vue-grid-layout

1 Ответ

0 голосов
/ 08 февраля 2019

Вы хотите динамические компоненты , что можно сделать с помощью синтаксиса <component :is="component"></component>.Если все элементы, которые вы хотите отобразить, являются компонентами, вы можете сделать что-то вроде этого: 

<grid-item v-for="item in layout"
             :x="item.x"
             :y="item.y"
             :w="item.w"
             :h="item.h"
             :i="item.i">
  <component :is="item.c"></component>
</grid-item>

И JavaScript: 

import VueGridLayout from 'vue-grid-layout';
import Test from './test.vue';
import Test2 from './test2.vue';
export default {
  components: {
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem,
    Test,
    Test2
  },
  data: function (){
    return {
      layout: [
        {"x":0,"y":0,"w":2,"h":2,"i":"0", "c": 'Test'}, // component name used but you could also use a reference to the component
        {"x":2,"y":0,"w":2,"h":4,"i":"1", "c": 'Test2'}
      ];
    }
  }
}

Если только некоторые элементы будут компонентамиа некоторые из них представляют собой обычный HTML, возможно, вы можете пометить компоненты, которые являются компонентами в массиве макета: 

layout: [
        {"x":0,"y":0,"w":2,"h":2,"i":"0", "c": 'Test', isComponent: true},
        {"x":2,"y":0,"w":2,"h":4,"i":"1", "c": '<h1>Hello World</h1>', isComponent: false}
      ];

, а затем условно отобразить компонент или простой HTML в слоте элемента сетки. 

<grid-item v-for="item in layout"
             :x="item.x"
             :y="item.y"
             :w="item.w"
             :h="item.h"
             :i="item.i">
  <template>
    <component v-if="item.isComponent" :is="item.c"></component>
    <div v-else v-html="item.c"></div>
  </template>
</grid-item>
...