Vue change width and content
48,315
Solution 1
<div id='search' :style="{width: loggedIn ? '200px' : '400px'}"></div>
<div id="login" :style="{width: loggedIn ? '400px' : '200px'}">
<div id='somecontent' v-if="loggedIn"></div>
<div id='morecontent' v-if="loggedIn"></div>
<img v-if="!loggedIn">
</div>
You can bind style in vuejs by using v-bind
new Vue({
...
data: {
loggedIn: false
}
...
})
Solution 2
create a default width inside your data with the default value, like:
data() {
return {
myWidth: '200'
}
},
everytime you login you should change the width value, and then you can do something like this:
<div :style="{ width: myWidth + 'px' }" id='search' width="400px"></div>
hope it helps!
Related videos on Youtube
Author by
JFugger_jr
Updated on July 09, 2022Comments
-
JFugger_jr almost 2 years
I am using vuejs and depending on whether the user is logged in, I need to adjust the size and content of two divs inside my topbar. So if they aren't logged in it should be like this:
<div id='search' width="400px"></div><div id="login" width="200px"><img></div>
And when they're logged in it should be like this:
<div id='search' width="200px"></div><div id="login" width="400px"><div id='somecontent></div><div id='morecontent'></div></div>
I know i can achieve this by hardcoding both of them entirely and then using v-if statements but I was wondering if there was a better way.