Vue grid layout с обновлением CSS

Question

Я работаю с Vue js и vue-grid-layout.Я хотел бы создать панель управления с некоторым виджетом.

CSS работает с сеткой других, которые уже находятся в объекте макета.Таким образом, я могу добавить сетку с кнопкой, но CSS не применяется к новой сетке.

Есть кнопка с действием щелчка, которая называется addGrid (), она добавит в конец макетавозражать против новой строки.

Заранее спасибо, надеюсь, мой пост понятен каждому.

 <grid-layout
            :layout="layout"
            :col-num="10"
            :row-height="10"
            :is-draggable="true"
            :is-resizable="true"
            :is-mirrored="false"
            :vertical-compact="false"
            :margin="[10, 10]"
            :use-css-transforms="false">

            <grid-item v-for="item in layout"
                   :x="item.x"
                   :y="item.y"
                   :w="item.w"
                   :h="item.h"
                   :i="item.i">
                   <span class="text">{{item.i}}</span>
            </grid-item>
</grid-layout>

import VueGridLayout from "vue-grid-layout";
export default {
  name: "Home",
  data() {
    return {
      layout: [
        { x: 0, y: 0, w: 2, h: 2, i: "0" },
        { x: 2, y: 0, w: 2, h: 4, i: "1" },
        { x: 4, y: 0, w: 2, h: 5, i: "2" },
      ],
    };
  },
  methods: {
    addGrid() {
      this.layout.push({x:0, y:-1, w:2, h:5, i:parseInt(this.layout[this.layout.length - 1].i, 10) + 1});
    }
  }
};

Здесь приведен пример css grind

.vue-grid-item:not(.vue-grid-placeholder) {
  background: #4caf50;
  opacity: 0.7;
  border: 1px solid black;
}

Answer 1

Ну, я нашел решение.Сначала удалил scoped в "style scoped", и я добавил класс в, чтобы применить CSS к сетке!

<grid-item v-for="item in layout" class="grid-widget"
                        [........]
                    <span class="text">{{item.i}}</span>
</grid-item>

<style>
    .grid-widget {
        background: #4caf50;
        opacity: 0.7;
        border: 1px solid black;
    }
</style>