vuejs v-bind:style margin-right 工作但不是 margin-left

Question

So I'm having trouble with a :style on one of my div elements, when I do the following :

:style="(index + 1) % 2 == (0) && type.Liste.length === indexVin + 1 ? `margin-left : calc((100% - (100% / ${type.Liste.length})) + 6rem);` : null"

this happens, as you can see the style attribute is empty

But if I change my margin-left to a margin-right or a padding-left it works just fine

I read here that the margin-left should be in camelCase but I tried and nothing changed, weird thing is margin-right or padding-left are in kebab-case and work just fine.

I don't think it comes from my shorthand if since, once again it works whenever I set my css to anything but margin-left , I also tried removing any other source of css on my div (so only the one I setup here is applied) and that didn't work either.

I'm running out of solutions, and yes I absolutely need it to be a margin instead of a padding

Edit : Here's a bit more code, the weirdest thing happened, my console.log work just fine, triggering when it needs to but for some reason if I put margin-left in my if(even) it doesn't work however margin-left works when it enters the else if(odd) and it's the same for margin-right but in the opposite direction, margin-right only works when it's in the if(even) any idea why ?

 methods : { computedStyle(index , type , indexVin ) { if ((index + 1) % 2 == (0) && type.Liste.length === indexVin + 1) { console.log('even and last') return `margin-left : calc((100% - (100% / ${type.Liste.length})) + 6rem);` } else if (type.Liste.length === indexVin + 1) { console.log('odd and last') return `margin-right : calc((100% - (100% / ${type.Liste.length})) + 6rem);` // return `'margin-left' : calc((100% - (100% / ${type.Liste.length})) - 6rem);` // return 'background-color : red' } else { console.log('nothing special') return null } }, }

 <div class="padding-block-1" v-for="(type , index) in TypesDeVins" :key="index"> <div class="tw-flex tw-items-end slider-top" :class="[LeftOrRight(index) , FlexDirection(index)]"> <div class="colonnes-resp-2 tw-flex-shrink-0" :class="LeftOrRightMargin(index , 2)"> <h4 class="tw-uppercase tw-font-bold text-1-2 letter-spacing-3" :class="ColorTitle(index)">Les appellations</h4> <h2 class="tw-uppercase tw-text-white tw-font-bold text-2-4 tw-mb-12 letter-spacing-4">{{ type.Nom }}</h2> </div> <div class="swiper-container" :class="`slider-top-${index}`" :dir="rtl(index)"> <div class="swiper-wrapper"> <div class="nom-vin swiper-slide" v-for="(vin , indexVin) in type.Liste" :key="indexVin" :class="slideDir(index)" :style="computedStyle(index , type , indexVin)" > <h3 class="tw-text-white tw-font-bold tw-uppercase letter-spacing-3 text-1-2 tw-pb-12">{{ vin.title.rendered }}</h3> </div> </div> </div> </div> </div>

Answer 1

The documentation starts out by showing a style binding using an object: https://v2.vuejs.org/v2/guide/class-and-style.html

Here's an example from the docs:

<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"

Try this, also perhaps break out that style as a computed property to help readability and debugging.

template:

<div :style="computedStyle(index)"></div>

script: (this needs to be added within computed not methods.)

computedStyle() {
  const listeLength = this.TypesDeVins[index].Liste.length;
  return index => {
    return (index + 1) % 2 == (0) && listeLength === indexVin + 1
        ? {'margin-left' : `calc((100% - (100% / ${listeLength})) + 6rem)`} 
        : null;
  }}

A couple notes:

• this computedStyle should be located within computed, not methods.
• the error you received was correct, in my example type was not defined
• type is a single item from your TypesDeVins array
• i created a const to simply define the value directly you were keying off of

i recommend throwing in a debugger if needed to step through your code here to ensure the values are coming through as you expect them to.

Based on your new code:

computed : {
  computedStyle() {
    return (index, indexVin) => {
      const listeLength = this.TypesDeVins[index].Liste.length;
      const spacing = `calc((100% - (100% / ${listeLength})) + 6rem)`;
      if ((index + 1) % 2 == (0) && listeLength === indexVin + 1) return {'margin-left' : spacing};
      if (listeLength === indexVin + 1) return {'margin-right' : spacing};

      return {};
    }
  }
},

Pay close attention to how parameters are used within a computed