Vue grid layout with css update

Question

I'm working with Vue js and the vue-grid-layout. I would like to create a dashboard with some widget.

The css is working with the others grid that are already in the layout object. So, I can add a grid with a button, but the css does not apply to the new grid.

There is a button with a click action named addGrid(), it will add to the end of the layout object a new row.

Thanks in advance, hopefully my post is understandable by every one.

 <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});
    }
  }
};

Here goes an exemple of css grind

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

Welcome to StackOverflow! Please try to create an MCVE (see [mcve]) so other users can help you faster and do not need to read way to many unnecessary lines of code :) — Hille, Oct 04 '18 at 09:38
Yes, it's way more readable and easier to understand. You got an upvote for your effort. This will attract more user who could help you than with the first try. — Hille, Oct 04 '18 at 10:52
Than please answer your own question so that other people with the same question have a solution — Hille, Oct 05 '18 at 14:55
@Hille I modified the post to add the solution of the question — Sankamille, Oct 05 '18 at 15:46
Please do not do this! It's because other people are searching for your question they will be irritated by the 0 answers tag and they need to search in your question for the answer. **It's no shame to answer your own question :)** — Hille, Oct 05 '18 at 16:12
Oh right my bad... I didn't see the button "add an answer", still thanks for your help! — Sankamille, Oct 06 '18 at 08:10

score 1 · Answer 1 · answered Oct 06 '18 at 08:09

1

Well I finded a solution. First removed the scoped in "style scoped" and I added a class in the to apply the css to the grid !

<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>

answered Oct 06 '18 at 08:09

Sankamille

29
4

Why did you remove `scoped` style? See [this answer](https://stackoverflow.com/a/50985784/1981247) to see how to solve it. I presume you could simply use `>>>.grid-widget` (so just add `>>>` before the class). See that answer and grok it, it will help you understand what's going on. – Traxo Oct 17 '18 at 12:08

Vue grid layout with css update

1 Answers1