Alter the dimensions and material displayed on Vue

Question

Alter the dimensions and material displayed on Vue

In my Vue.js project, I have a topbar with two divs whose size and content need to be adjusted based on whether the user is logged in. If they are not logged in, it should look like this:

<div id='search' width="400px"></div><div id="login" width="200px"><img></div>

And when they are logged in, it should appear as follows:

<div id='search' width="200px"></div><div id="login" width="400px"><div id='somecontent></div><div id='morecontent'></div></div>

While I am aware that I can achieve this by hardcoding both options and utilizing v-if statements, I am exploring if there is an alternative approach.

html css vue.js vuejs2

Answer 1

Answer №1

<div id='search' :style="{width: isLoggedIn ? '200px' : '400px'}"></div>
<div id="login" :style="{width: isLoggedIn ? '400px' : '200px'}">
  <div id='somecontent' v-if="isLoggedIn"></div>
  <div id='morecontent' v-if="isLoggedIn"></div>
  <img v-if="!isLoggedIn">
</div>

You can apply styling dynamically in Vue.js using v-bind

new Vue({
  ...
  data: {
    isLoggedIn: false
  }
  ...
})

Check out this fiddle for an example

Answer 2

<div id='search' :style="{width: isLoggedIn ? '200px' : '400px'}"></div>
<div id="login" :style="{width: isLoggedIn ? '400px' : '200px'}">
  <div id='somecontent' v-if="isLoggedIn"></div>
  <div id='morecontent' v-if="isLoggedIn"></div>
  <img v-if="!isLoggedIn">
</div>

You can apply styling dynamically in Vue.js using v-bind

new Vue({
  ...
  data: {
    isLoggedIn: false
  }
  ...
})

Check out this fiddle for an example

Answer 3

Answer №2

Establish a default width value in your data section, such as:

data() {
        return {
            defaultWidth: '200'
        }
    },

Upon logging in, you can update the width value and then implement it like this:

<div :style="{ width: defaultWidth + 'px' }" id='search' width="400px"></div>

Hopefully, this tip proves to be helpful!

Answer 4

Establish a default width value in your data section, such as:

data() {
        return {
            defaultWidth: '200'
        }
    },

Upon logging in, you can update the width value and then implement it like this:

<div :style="{ width: defaultWidth + 'px' }" id='search' width="400px"></div>

Hopefully, this tip proves to be helpful!

Answer 5

Answer №3

To implement the style attribute, follow these steps:

const app = new Vue({
  el: '#app',
  data: {
    loggedIn: false
  },
  created() {
    /*
    if (CHECK_IF_USER_HAS_LOGGED_IN) {
        this.loggedIn = true
    }
    */
  },
  methods: {
    login() { this.loggedIn = true },
    logout() { this.loggedIn = false }
  }
});

#search, #login {
  border: solid 1px black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
  <button v-on:click="login()">Log in</button>
  <button v-on:click="logout()">Log out</button>
  <div id='search' v-bind:style="{width: loggedIn ? '400px' : '200px'}">Search Stuff</div>
  <div id="login" v-bind:style="{width: loggedIn ? '200px' : '400px'}">
    <img v-if="!loggedIn" src="http://via.placeholder.com/350x150">
    <template v-if="loggedIn">
      <div id="somecontent">some content</div>
      <div id="morecontent">more content</div>
    </template>
  </div>
</div>

Answer 6

To implement the style attribute, follow these steps:

const app = new Vue({
  el: '#app',
  data: {
    loggedIn: false
  },
  created() {
    /*
    if (CHECK_IF_USER_HAS_LOGGED_IN) {
        this.loggedIn = true
    }
    */
  },
  methods: {
    login() { this.loggedIn = true },
    logout() { this.loggedIn = false }
  }
});

#search, #login {
  border: solid 1px black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
  <button v-on:click="login()">Log in</button>
  <button v-on:click="logout()">Log out</button>
  <div id='search' v-bind:style="{width: loggedIn ? '400px' : '200px'}">Search Stuff</div>
  <div id="login" v-bind:style="{width: loggedIn ? '200px' : '400px'}">
    <img v-if="!loggedIn" src="http://via.placeholder.com/350x150">
    <template v-if="loggedIn">
      <div id="somecontent">some content</div>
      <div id="morecontent">more content</div>
    </template>
  </div>
</div>

Alter the dimensions and material displayed on Vue

Answer №1

Answer №2

Answer №3

Similar questions

Creating an object positioned to the right side of a div (div:right) is a matter of using CSS positioning properties

What is the best way to fill these fields with data that already exists?

How come my menu is not showing up in the same format as the code?

Efficiently refine your search using the combination of checkboxes and dropdown menus simultaneously

Utilizing data attributes and JavaScript to dynamically assign a class to carousel navigation items

Aligning two items to the right along the vertical axis, even if they have different heights (Bootstrap

Troubleshooting VueJS: Imported JS file function fails to trigger

ASP.Net & Ajax Fusion Login Interface

How can I effectively display the city weather information that I have chosen from the drop-down menu?

Creating two interactive animations utilizing a combination of CSS and Javascript, triggered by the click event on

What steps should be taken to incorporate that dynamic sliding element (like a sliding screen paper) on the webpage?

Step by step guide on integrating a Vue template into a Django project

Generating a new display div element using an anchor link

The API response indicating success is simply denoted as "Success: True", without any accompanying data

I have come to realize that my understanding of how Sass nesting works was misguided

What is the best way to close an ajax page within the main page using a button?

Can Chrome support color management for css colors?

Striking a balance between innovation and backward compatibility in the realm of Web Design/Development

Having trouble getting the items to show up on the canvas

This webpage is optimized for all browsers, with the exception of the Android Browser that may display fonts with larger sizes