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 minimal reproducible example) so other users can help you faster and do not need to read way to many unnecessary lines of code :) — Hille
– Hille, Commented Oct 4, 2018 at 9: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
– Hille, Commented Oct 4, 2018 at 10:52
Well I finded a solution. First removed the scoped in <style scoped> and I added a class in the <grid-item> to apply the css to the grid ! — Sankamille
– Sankamille, Commented Oct 5, 2018 at 14:36
Oh right my bad... I didn't see the button "add an answer", still thanks for your help! — Sankamille
– Sankamille, Commented Oct 6, 2018 at 8:10

Sankamille · Accepted Answer · 2018-10-06 08:09:01Z

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 6, 2018 at 8:09

Sankamille

294 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Traxo Over a year ago

Why did you remove scoped style? See this answer 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.

Collectives™ on Stack Overflow

Vue grid layout with css update

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related