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

Question

所以当我执行以下操作时，我的一个 div 元素上的 :style 遇到了问题：

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

发生这种情况，您可以看到 style 属性为空

但是，如果我将我的 margin-left 更改为 margin-right 或 padding-left 它就可以了

我读到here 说margin-left 应该是camelCase 但我试过了，没有任何改变，奇怪的是margin-right 或padding-left 是kebab-case 并且工作得很好。

我不认为它来自我的速记，因为，每当我将我的 css 设置为除 margin-left 之外的任何东西时，它都会再次起作用，我还尝试在我的 div 上删除任何其他 css 源（所以只有我此处的设置已应用），但也没有用。

我的解决方案已经用完了，是的，我绝对需要它作为边距而不是填充

编辑：这里有更多代码，发生了最奇怪的事情，我的 console.log 工作得很好，在需要时触发，但由于某种原因，如果我将 margin-left 放在我的if(even)它不起作用但是margin-left 在进入else if(odd) 时有效，margin-right 相同，但方向相反，margin-right 仅在其位于if(even) 时有效，知道为什么吗？

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

文档首先显示了使用对象的样式绑定： https://vuejs.org/v2/guide/class-and-style.html

这是文档中的一个示例：

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

试试这个，也许也可以将这种样式分解为计算属性以帮助可读性和调试。

模板：

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

脚本： （这需要添加到 computed 而不是方法中。）

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

几个注意事项：

• 此 computedStyle 应位于计算的，而不是方法中。
• 您收到的错误是正确的，在我的示例中类型未定义
• type 是 TypesDeVins 数组中的单个项目
• 我创建了一个 const 来直接定义您要键入的值

如果需要在此处单步执行您的代码，我建议您加入一个调试器，以确保值按照您的预期通过。

根据您的新代码：

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 {};
    }
  }
},

密切注意参数在计算中的使用方式