Binding function with parameters in html class in Vue

Question

I have html element:

<div style="grid-column: span 1">

I would like to use function to determine span size: I try something like this, but it doesn't render.

:style="{ 'grid-column: span': getColumnSize('string') }"

what is correct syntax?

علی سالمی · Accepted Answer · 2021-02-16 12:55:24Z

1

use computed method. in computed method you can write a function that return your style as an object. then use it in your html.

<div :style="getColumnSize"></div>

computed: {
  getColumnSize() {
    return {
      gridColumn: 'span 1'
    }
  }
}

note: you should use camel case.

answered Feb 16, 2021 at 12:55

علی سالمی

3974 silver badges12 bronze badges

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

Comments

Orish · Accepted Answer · 2021-02-16 12:53:12Z

0

i would store the value of span in data then place the value in style like this

<div :style="`grid-column : span ${spanValue}`"> new div with grid</div>

answered Feb 16, 2021 at 12:53

Orish

11 bronze badge

kusiaga · Accepted Answer · 2021-02-17 09:04:43Z

0

you can do like this


<div :style="{ 'grid-column': `span ${getColumnSize('string')}` }"></div>

answered Feb 16, 2021 at 12:52

kusiaga

6951 gold badge7 silver badges21 bronze badges