Vue - Setting the width of a component dynamically

Question

I can't figure out how to dynamically set the width of a component.

I am using the component 'vue-burger-menu' -> https://github.com/mbj36/vue-burger-menu.

To set the width one needs to set the prop width to a number. As per the example below:

<Slide
      ref="slideToggle"
      disable-esc
      class="slideToggle"
      width="470"
      right
      :burger-icon="false"
      :cross-icon="false"
      disable-outside-click
    >

It then sets a helper class - bm-menu width to the width. I have spent quite a while trying to figure out how to either set the prop's attribute dynamically or dynamically update the style.

For example I tried setting: this.$refs.slideToggle.$attrs.width = 1000 to no avail.

I can't bind a style to the bm-menu class as it's not visible.

How do I set the width so on the click of a button it changes (as per the button example below)?

Thanks for your help!

setDrawWidth() {
        this.lineDrawWidth = "200px";
    }

score 4 · Accepted Answer · edited Jul 15 '22 at 21:18

4

You just need binding which uses : before props:

<Slide
      ref="slideToggle"
      disable-esc
      class="slideToggle"
      :width="width"
      right
      :burger-icon="false"
      :cross-icon="false"
      disable-outside-click
>

And then in your data in js part:

export default {
     data:() => ({   width: '470'  }),
}

Now you just need to change width variable. For example:

export default {
     data:() => ({   width: '470'  }),
     methods:{
          changeWidth(){
               this.width = '1000';
          }
     }
}

You can read more about binding variables from the doc: Vue Props

edited Jul 15 '22 at 21:18

tony19

125,647
18
229
307

answered Apr 29 '20 at 20:43

Alireza HI

1,873
1
12
20

Thanks! Just one thing I had to change in this example if anyone comes looking... the with numbers need to be in quotation marks. i.e "470" – tbowden Apr 29 '20 at 21:02
@tbowden I changed it based on your feedback. tnx – Alireza HI Apr 29 '20 at 21:05

score 0 · Answer 2 · answered Apr 29 '20 at 20:44

Listen on window width event:

data: () => ({
  width: 470
})
created() {
  window.addEventListener("resize", this.changeWidth);
},
destroyed() {
  window.removeEventListener("resize", this.changeWidth);
},
methods: {
  changeWidth(e) {
    const screenWidth = window.innerWidth;
    this.width = screenWidth
  }
}

and set width in Slide component:

<Slide
      ref="slideToggle"
      disable-esc
      class="slideToggle"
      :width="width"
      right
      :burger-icon="false"
      :cross-icon="false"
      disable-outside-click
    >

Vue - Setting the width of a component dynamically

2 Answers2

Linked