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

What could be causing my ajax request to not be successfully compiled?

Guide to aligning the center of a div with the mouse cursor using JavaScript during mouse movement

"Rearrange elements on a webpage using CSS and HTML to position one

Creating a Striking Multi-Layered CSS Header

Creating a captivating animation for a social media like button with CSS

What is the best way to conceal text while retaining icons on a compact screen?

I am interested in creating JSON data

a guide to presenting information in a horizontal layout within a single table using the Laravel framework and Vue.js

Enhance Your Vue Tables with Unique Custom Filters

Consistent CSS alignment across all browsers

Leveraging CSS keyframes to create dynamic animations

Newbie Inquiry Renewed: What is the best way to convert this into a functional hyperlink that maintains the data received from the ID tag?

Struggling with a malfunctioning Bootstrap dropdown that refuses to drop down

Navigation bar experiencing resizing problem, refreshing resolves the issue

Mastering the Material-UI Grid in SPAs: Conquering the Negative Margin Dilemma

What is the process for including icons on buttons?

Styling a component next to another using CSS

Incorporate negative padding in order to smoothly scroll to a specific ID

Customizing Material-UI: A guide to overriding inner components

What is the best way to center the input on the page?