The v-bind:style directive in Vue.js is functioning properly for setting the margin-right property, however

Question

The v-bind:style directive in Vue.js is functioning properly for setting the margin-right property, however

Having an issue with applying a specific style to one of my div elements. When using the following code:

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

The style attribute appears to remain empty, as shown in the screenshot below:

https://i.sstatic.net/NHxVq.png

However, if I change the margin-left to either margin-right or padding-left, it works as expected:

https://i.sstatic.net/QNp8H.png

https://i.sstatic.net/hHr9g.png

After reading up on some documentation, I found that margin-left should be in camelCase. Despite trying this, the issue persists. What's strange is that both margin-right and padding-left, which are in kebab-case, work perfectly fine.

I have made sure there are no conflicting CSS styles applied to the div element besides the one mentioned here. Unfortunately, this did not resolve the problem either.

If you have any insight into why specifically margin-left is causing these issues, please let me know.

Edit: Upon further investigation, I discovered that although console.log functions correctly based on the conditions provided, applying margin-left within the if(even) block does not produce the desired result. However, when placed inside the else if(odd) block, it works properly. A similar behavior was observed for margin-right, yet with opposite outcomes. Any thoughts on why this might be happening?

Check out the additional code snippet below:

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

javascript html css vue.js

Answer 1

Answer №1

The guide begins by demonstrating a style binding with an object: https://v2.vuejs.org/v2/guide/class-and-style.html

Here's a sample code snippet from the documentation:

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

One suggestion is to extract that style into a computed property for better readability and debugging.

template:

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

script: (this should be placed under computed, not methods.)

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

A couple of points to note:

The computedStyle function should be in the computed section, not methods.
The error message you encountered was correct since "type" was not defined in my example.
"Type" refers to a single item from your TypesOfWines array.
I introduced a constant to directly define the value you were referencing.

If necessary, utilize a debugger to step through your code and confirm the values are as expected.

Based on your revised code:

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

      return {};
    }
  }
},

Remember to pay attention to how parameters are utilized within a computed property.

Answer 2

The guide begins by demonstrating a style binding with an object: https://v2.vuejs.org/v2/guide/class-and-style.html

Here's a sample code snippet from the documentation:

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

One suggestion is to extract that style into a computed property for better readability and debugging.

template:

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

script: (this should be placed under computed, not methods.)

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

A couple of points to note:

The computedStyle function should be in the computed section, not methods.
The error message you encountered was correct since "type" was not defined in my example.
"Type" refers to a single item from your TypesOfWines array.
I introduced a constant to directly define the value you were referencing.

If necessary, utilize a debugger to step through your code and confirm the values are as expected.

Based on your revised code:

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

      return {};
    }
  }
},

Remember to pay attention to how parameters are utilized within a computed property.

The v-bind:style directive in Vue.js is functioning properly for setting the margin-right property, however

Answer №1

Similar questions

What is the process of setting a TypeScript variable to any attribute value?

Issue accessing object property in Handlebars template with ExpressJs

JavaScript: Dynamically load a script when a particular <a> element is in an active state

The event listener for onChange on my dropdown menu is not functioning as expected

Using Ajax to dynamically load Wordpress post details and content into a designated div element

Iterate through the complex array of nested objects and modify the values according to specified conditions

Separate scales for small multiple line charts

The tag's onclick function that was dynamically created was not triggering in jQuery

The correct way to update component state when handling an onChange event in React using Typescript

Retrieve the property type for the specified object

Deleting content in a text area when specific text is entered

Mongodb Node.js - Kerberos module could not be located

What approach should be taken to effectively utilize the Vuetify skeleton in a Nuxt project?

Is there a way to clear the search box in a wenzhixin bootstrap table without refreshing the page when clicked on?

Difficulty encountered with fetching results using jQuery autocomplete with AJAX as the data source

Learn how to efficiently transfer a dynamic subtitle text value from an HTML5 video player to a database

Stop a loop that includes an asynchronous AJAX function

Is it possible to create a compound editor within a cell in SlickGrid that contains two date fields

Troubleshooting SCSS Issues in NextJS

Combining Multiple 3D JSON Objects in JavaScript [or jQuery]