v-for render or dont render on x iteration Unicorn Meta Zoo #1: Why another podcast? Announcing the arrival of Valued Associate #679: Cesar Manara Data science time! April 2019 and salary with experience The Ask Question Wizard is Live!What is the best way to iterate over a dictionary?What is the “right” way to iterate through an array in Ruby?What is the most “pythonic” way to iterate over a list in chunks?Why is using “for…in” with array iteration a bad idea?Iterate through a HashMapHow to determine the first and last iteration in a foreach loop?How do I iterate over a JSON structure?Iterate through object propertiesHow to Iterate over a Set/HashSet without an Iterator?Ways to iterate over a list in Java
Trumpet valves, lengths, and pitch
As an international instructor, should I openly talk about my accent?
All ASCII characters with a given bit count
What is /etc/mtab in Linux?
PIC mathematical operations weird problem
Book with legacy programming code on a space ship that the main character hacks to escape
Putting Ant-Man on house arrest
"My boss was furious with me and I have been fired" vs. "My boss was furious with me and I was fired"
How to find the right literary agent in the USA?
Are these square matrices always diagonalisable?
Password Generator in batch
What is it called when you ride around on your front wheel?
How to count in linear time worst-case?
Justification for leaving new position after a short time
Could moose/elk survive in the Amazon forest?
What is the ongoing value of the Kanban board to the developers as opposed to management
Has a Nobel Peace laureate ever been accused of war crimes?
How to not starve gigantic beasts
Error: Syntax error. Missing ')' for CASE Statement
Why didn't the Space Shuttle bounce back into space as many times as possible so as to lose a lot of kinetic energy up there?
What do you call the part of a novel that is not dialog?
Does Mathematica have an implementation of the Poisson Binomial Distribution?
Visa-free travel to the US using refugee travel document from Spain?
Multiple fireplaces in an apartment building?
v-for render or dont render
Unicorn Meta Zoo #1: Why another podcast?
Announcing the arrival of Valued Associate #679: Cesar Manara
Data science time! April 2019 and salary with experience
The Ask Question Wizard is Live!What is the best way to iterate over a dictionary?What is the “right” way to iterate through an array in Ruby?What is the most “pythonic” way to iterate over a list in chunks?Why is using “for…in” with array iteration a bad idea?Iterate through a HashMapHow to determine the first and last iteration in a foreach loop?How do I iterate over a JSON structure?Iterate through object propertiesHow to Iterate over a Set/HashSet without an Iterator?Ways to iterate over a list in Java
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
I did not find solution to my question anywhere and I can't figure it out. I have divs like this
<div class="columns">
<div class="column">
looping content here
</div>
</div
Data is something like this:
title: 'blabla'
body: 'blabla'
msg: 'blabla"
For responsive purposes I need 3 columns max side by side and then start another columns container that will stack columns underneath. So 3 column divs inside columns container and then create another columns div with 3 column divs inside and go until the array is empty.
I have tried computed count property but don't know how to iterate it inside of v-for. Also tried v-if but it didnt work as planned :(
Is it even possible in v-for? I dont know what approach to take to be honest.
loops vue.js render v-for
add a comment |
I did not find solution to my question anywhere and I can't figure it out. I have divs like this
<div class="columns">
<div class="column">
looping content here
</div>
</div
Data is something like this:
title: 'blabla'
body: 'blabla'
msg: 'blabla"
For responsive purposes I need 3 columns max side by side and then start another columns container that will stack columns underneath. So 3 column divs inside columns container and then create another columns div with 3 column divs inside and go until the array is empty.
I have tried computed count property but don't know how to iterate it inside of v-for. Also tried v-if but it didnt work as planned :(
Is it even possible in v-for? I dont know what approach to take to be honest.
loops vue.js render v-for
add a comment |
I did not find solution to my question anywhere and I can't figure it out. I have divs like this
<div class="columns">
<div class="column">
looping content here
</div>
</div
Data is something like this:
title: 'blabla'
body: 'blabla'
msg: 'blabla"
For responsive purposes I need 3 columns max side by side and then start another columns container that will stack columns underneath. So 3 column divs inside columns container and then create another columns div with 3 column divs inside and go until the array is empty.
I have tried computed count property but don't know how to iterate it inside of v-for. Also tried v-if but it didnt work as planned :(
Is it even possible in v-for? I dont know what approach to take to be honest.
loops vue.js render v-for
I did not find solution to my question anywhere and I can't figure it out. I have divs like this
<div class="columns">
<div class="column">
looping content here
</div>
</div
Data is something like this:
title: 'blabla'
body: 'blabla'
msg: 'blabla"
For responsive purposes I need 3 columns max side by side and then start another columns container that will stack columns underneath. So 3 column divs inside columns container and then create another columns div with 3 column divs inside and go until the array is empty.
I have tried computed count property but don't know how to iterate it inside of v-for. Also tried v-if but it didnt work as planned :(
Is it even possible in v-for? I dont know what approach to take to be honest.
loops vue.js render v-for
loops vue.js render v-for
asked Mar 9 at 6:14
powajojpowajoj
52
52
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
Why not just insert each column inside a single columns container and then use CSS to wrap to a new row every 3 columns. The added benefit of this is that you can adjust the number of columns that appear in each row with media queries.
Try running the snippet below in full screen and the resize the browser to less than 576px wide to see the responsive columns.
new Vue(
el: '#app',
data ()
return
columns: [
title: 'blabla',
body: 'blabla',
msg: 'blabla'
,
title: 'blabla',
body: 'blabla',
msg: 'blabla'
,
title: 'blabla',
body: 'blabla',
msg: 'blabla'
,
title: 'blabla',
body: 'blabla',
msg: 'blabla'
,
title: 'blabla',
body: 'blabla',
msg: 'blabla'
]
)
.columns
display: flex;
flex-wrap: wrap;
.column
box-sizing: border-box;
padding: 1em;
width: 33.3%;
/* on devices smaller than 576px, stack columns */
@media (max-width: 576px)
.column
width: 100%;
<script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></script>
<div id="app">
<div class="columns">
<div v-for="(column, index) in columns" class="column" :key="index">
<h2> column.title </h2>
<p> column.body </p>
<strong> column.msg </strong>
</div>
</div>
</div>
Wow, why didnt I think of doing it with CSS? This works brilliantly. Thank you.
– powajoj
Mar 9 at 10:38
add a comment |
It's possible to nest v-for
loops if the data is correctly formatted.
For example, an array (for the first v-for
) of objects (for the second loop):
new Vue(
el: "#app",
data()
return
items: [
title: 'Title 1',
body: 'body 1',
msg: 'message 1'
,
title: 'Title 2',
body: 'body 2',
msg: 'message 2'
]
)
.columns
align-items: center;
display: flex;
height: 40px;
justify-content: space-around;
width: 50%;
<script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></script>
<div id="app">
<div class="columns" v-for="item in items">
<div class="column" v-for="(value, key) in item">
<div> value </div>
</div>
</div>
</div>
Your code works and I'm currently trying to adjust it as yours makes 3 columns (col1 - title 1, col 2- body 1, col 3 - message 1) and then makes another div of 3 columns. Thats a lot closer to the solution I need but it's not quite it. I need to restructure data so i can have (col1 - title1, body 1, message1, col 2-> t1,b1,m1..etc to col3 then new group.
– powajoj
Mar 9 at 10:21
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55074582%2fv-for-render-or-dont-render-div-on-x-iteration%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Why not just insert each column inside a single columns container and then use CSS to wrap to a new row every 3 columns. The added benefit of this is that you can adjust the number of columns that appear in each row with media queries.
Try running the snippet below in full screen and the resize the browser to less than 576px wide to see the responsive columns.
new Vue(
el: '#app',
data ()
return
columns: [
title: 'blabla',
body: 'blabla',
msg: 'blabla'
,
title: 'blabla',
body: 'blabla',
msg: 'blabla'
,
title: 'blabla',
body: 'blabla',
msg: 'blabla'
,
title: 'blabla',
body: 'blabla',
msg: 'blabla'
,
title: 'blabla',
body: 'blabla',
msg: 'blabla'
]
)
.columns
display: flex;
flex-wrap: wrap;
.column
box-sizing: border-box;
padding: 1em;
width: 33.3%;
/* on devices smaller than 576px, stack columns */
@media (max-width: 576px)
.column
width: 100%;
<script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></script>
<div id="app">
<div class="columns">
<div v-for="(column, index) in columns" class="column" :key="index">
<h2> column.title </h2>
<p> column.body </p>
<strong> column.msg </strong>
</div>
</div>
</div>
Wow, why didnt I think of doing it with CSS? This works brilliantly. Thank you.
– powajoj
Mar 9 at 10:38
add a comment |
Why not just insert each column inside a single columns container and then use CSS to wrap to a new row every 3 columns. The added benefit of this is that you can adjust the number of columns that appear in each row with media queries.
Try running the snippet below in full screen and the resize the browser to less than 576px wide to see the responsive columns.
new Vue(
el: '#app',
data ()
return
columns: [
title: 'blabla',
body: 'blabla',
msg: 'blabla'
,
title: 'blabla',
body: 'blabla',
msg: 'blabla'
,
title: 'blabla',
body: 'blabla',
msg: 'blabla'
,
title: 'blabla',
body: 'blabla',
msg: 'blabla'
,
title: 'blabla',
body: 'blabla',
msg: 'blabla'
]
)
.columns
display: flex;
flex-wrap: wrap;
.column
box-sizing: border-box;
padding: 1em;
width: 33.3%;
/* on devices smaller than 576px, stack columns */
@media (max-width: 576px)
.column
width: 100%;
<script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></script>
<div id="app">
<div class="columns">
<div v-for="(column, index) in columns" class="column" :key="index">
<h2> column.title </h2>
<p> column.body </p>
<strong> column.msg </strong>
</div>
</div>
</div>
Wow, why didnt I think of doing it with CSS? This works brilliantly. Thank you.
– powajoj
Mar 9 at 10:38
add a comment |
Why not just insert each column inside a single columns container and then use CSS to wrap to a new row every 3 columns. The added benefit of this is that you can adjust the number of columns that appear in each row with media queries.
Try running the snippet below in full screen and the resize the browser to less than 576px wide to see the responsive columns.
new Vue(
el: '#app',
data ()
return
columns: [
title: 'blabla',
body: 'blabla',
msg: 'blabla'
,
title: 'blabla',
body: 'blabla',
msg: 'blabla'
,
title: 'blabla',
body: 'blabla',
msg: 'blabla'
,
title: 'blabla',
body: 'blabla',
msg: 'blabla'
,
title: 'blabla',
body: 'blabla',
msg: 'blabla'
]
)
.columns
display: flex;
flex-wrap: wrap;
.column
box-sizing: border-box;
padding: 1em;
width: 33.3%;
/* on devices smaller than 576px, stack columns */
@media (max-width: 576px)
.column
width: 100%;
<script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></script>
<div id="app">
<div class="columns">
<div v-for="(column, index) in columns" class="column" :key="index">
<h2> column.title </h2>
<p> column.body </p>
<strong> column.msg </strong>
</div>
</div>
</div>
Why not just insert each column inside a single columns container and then use CSS to wrap to a new row every 3 columns. The added benefit of this is that you can adjust the number of columns that appear in each row with media queries.
Try running the snippet below in full screen and the resize the browser to less than 576px wide to see the responsive columns.
new Vue(
el: '#app',
data ()
return
columns: [
title: 'blabla',
body: 'blabla',
msg: 'blabla'
,
title: 'blabla',
body: 'blabla',
msg: 'blabla'
,
title: 'blabla',
body: 'blabla',
msg: 'blabla'
,
title: 'blabla',
body: 'blabla',
msg: 'blabla'
,
title: 'blabla',
body: 'blabla',
msg: 'blabla'
]
)
.columns
display: flex;
flex-wrap: wrap;
.column
box-sizing: border-box;
padding: 1em;
width: 33.3%;
/* on devices smaller than 576px, stack columns */
@media (max-width: 576px)
.column
width: 100%;
<script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></script>
<div id="app">
<div class="columns">
<div v-for="(column, index) in columns" class="column" :key="index">
<h2> column.title </h2>
<p> column.body </p>
<strong> column.msg </strong>
</div>
</div>
</div>
new Vue(
el: '#app',
data ()
return
columns: [
title: 'blabla',
body: 'blabla',
msg: 'blabla'
,
title: 'blabla',
body: 'blabla',
msg: 'blabla'
,
title: 'blabla',
body: 'blabla',
msg: 'blabla'
,
title: 'blabla',
body: 'blabla',
msg: 'blabla'
,
title: 'blabla',
body: 'blabla',
msg: 'blabla'
]
)
.columns
display: flex;
flex-wrap: wrap;
.column
box-sizing: border-box;
padding: 1em;
width: 33.3%;
/* on devices smaller than 576px, stack columns */
@media (max-width: 576px)
.column
width: 100%;
<script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></script>
<div id="app">
<div class="columns">
<div v-for="(column, index) in columns" class="column" :key="index">
<h2> column.title </h2>
<p> column.body </p>
<strong> column.msg </strong>
</div>
</div>
</div>
new Vue(
el: '#app',
data ()
return
columns: [
title: 'blabla',
body: 'blabla',
msg: 'blabla'
,
title: 'blabla',
body: 'blabla',
msg: 'blabla'
,
title: 'blabla',
body: 'blabla',
msg: 'blabla'
,
title: 'blabla',
body: 'blabla',
msg: 'blabla'
,
title: 'blabla',
body: 'blabla',
msg: 'blabla'
]
)
.columns
display: flex;
flex-wrap: wrap;
.column
box-sizing: border-box;
padding: 1em;
width: 33.3%;
/* on devices smaller than 576px, stack columns */
@media (max-width: 576px)
.column
width: 100%;
<script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></script>
<div id="app">
<div class="columns">
<div v-for="(column, index) in columns" class="column" :key="index">
<h2> column.title </h2>
<p> column.body </p>
<strong> column.msg </strong>
</div>
</div>
</div>
edited Mar 9 at 10:30
answered Mar 9 at 10:24
camaulaycamaulay
915
915
Wow, why didnt I think of doing it with CSS? This works brilliantly. Thank you.
– powajoj
Mar 9 at 10:38
add a comment |
Wow, why didnt I think of doing it with CSS? This works brilliantly. Thank you.
– powajoj
Mar 9 at 10:38
Wow, why didnt I think of doing it with CSS? This works brilliantly. Thank you.
– powajoj
Mar 9 at 10:38
Wow, why didnt I think of doing it with CSS? This works brilliantly. Thank you.
– powajoj
Mar 9 at 10:38
add a comment |
It's possible to nest v-for
loops if the data is correctly formatted.
For example, an array (for the first v-for
) of objects (for the second loop):
new Vue(
el: "#app",
data()
return
items: [
title: 'Title 1',
body: 'body 1',
msg: 'message 1'
,
title: 'Title 2',
body: 'body 2',
msg: 'message 2'
]
)
.columns
align-items: center;
display: flex;
height: 40px;
justify-content: space-around;
width: 50%;
<script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></script>
<div id="app">
<div class="columns" v-for="item in items">
<div class="column" v-for="(value, key) in item">
<div> value </div>
</div>
</div>
</div>
Your code works and I'm currently trying to adjust it as yours makes 3 columns (col1 - title 1, col 2- body 1, col 3 - message 1) and then makes another div of 3 columns. Thats a lot closer to the solution I need but it's not quite it. I need to restructure data so i can have (col1 - title1, body 1, message1, col 2-> t1,b1,m1..etc to col3 then new group.
– powajoj
Mar 9 at 10:21
add a comment |
It's possible to nest v-for
loops if the data is correctly formatted.
For example, an array (for the first v-for
) of objects (for the second loop):
new Vue(
el: "#app",
data()
return
items: [
title: 'Title 1',
body: 'body 1',
msg: 'message 1'
,
title: 'Title 2',
body: 'body 2',
msg: 'message 2'
]
)
.columns
align-items: center;
display: flex;
height: 40px;
justify-content: space-around;
width: 50%;
<script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></script>
<div id="app">
<div class="columns" v-for="item in items">
<div class="column" v-for="(value, key) in item">
<div> value </div>
</div>
</div>
</div>
Your code works and I'm currently trying to adjust it as yours makes 3 columns (col1 - title 1, col 2- body 1, col 3 - message 1) and then makes another div of 3 columns. Thats a lot closer to the solution I need but it's not quite it. I need to restructure data so i can have (col1 - title1, body 1, message1, col 2-> t1,b1,m1..etc to col3 then new group.
– powajoj
Mar 9 at 10:21
add a comment |
It's possible to nest v-for
loops if the data is correctly formatted.
For example, an array (for the first v-for
) of objects (for the second loop):
new Vue(
el: "#app",
data()
return
items: [
title: 'Title 1',
body: 'body 1',
msg: 'message 1'
,
title: 'Title 2',
body: 'body 2',
msg: 'message 2'
]
)
.columns
align-items: center;
display: flex;
height: 40px;
justify-content: space-around;
width: 50%;
<script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></script>
<div id="app">
<div class="columns" v-for="item in items">
<div class="column" v-for="(value, key) in item">
<div> value </div>
</div>
</div>
</div>
It's possible to nest v-for
loops if the data is correctly formatted.
For example, an array (for the first v-for
) of objects (for the second loop):
new Vue(
el: "#app",
data()
return
items: [
title: 'Title 1',
body: 'body 1',
msg: 'message 1'
,
title: 'Title 2',
body: 'body 2',
msg: 'message 2'
]
)
.columns
align-items: center;
display: flex;
height: 40px;
justify-content: space-around;
width: 50%;
<script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></script>
<div id="app">
<div class="columns" v-for="item in items">
<div class="column" v-for="(value, key) in item">
<div> value </div>
</div>
</div>
</div>
new Vue(
el: "#app",
data()
return
items: [
title: 'Title 1',
body: 'body 1',
msg: 'message 1'
,
title: 'Title 2',
body: 'body 2',
msg: 'message 2'
]
)
.columns
align-items: center;
display: flex;
height: 40px;
justify-content: space-around;
width: 50%;
<script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></script>
<div id="app">
<div class="columns" v-for="item in items">
<div class="column" v-for="(value, key) in item">
<div> value </div>
</div>
</div>
</div>
new Vue(
el: "#app",
data()
return
items: [
title: 'Title 1',
body: 'body 1',
msg: 'message 1'
,
title: 'Title 2',
body: 'body 2',
msg: 'message 2'
]
)
.columns
align-items: center;
display: flex;
height: 40px;
justify-content: space-around;
width: 50%;
<script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></script>
<div id="app">
<div class="columns" v-for="item in items">
<div class="column" v-for="(value, key) in item">
<div> value </div>
</div>
</div>
</div>
answered Mar 9 at 9:42
SovalinaSovalina
3,53541027
3,53541027
Your code works and I'm currently trying to adjust it as yours makes 3 columns (col1 - title 1, col 2- body 1, col 3 - message 1) and then makes another div of 3 columns. Thats a lot closer to the solution I need but it's not quite it. I need to restructure data so i can have (col1 - title1, body 1, message1, col 2-> t1,b1,m1..etc to col3 then new group.
– powajoj
Mar 9 at 10:21
add a comment |
Your code works and I'm currently trying to adjust it as yours makes 3 columns (col1 - title 1, col 2- body 1, col 3 - message 1) and then makes another div of 3 columns. Thats a lot closer to the solution I need but it's not quite it. I need to restructure data so i can have (col1 - title1, body 1, message1, col 2-> t1,b1,m1..etc to col3 then new group.
– powajoj
Mar 9 at 10:21
Your code works and I'm currently trying to adjust it as yours makes 3 columns (col1 - title 1, col 2- body 1, col 3 - message 1) and then makes another div of 3 columns. Thats a lot closer to the solution I need but it's not quite it. I need to restructure data so i can have (col1 - title1, body 1, message1, col 2-> t1,b1,m1..etc to col3 then new group.
– powajoj
Mar 9 at 10:21
Your code works and I'm currently trying to adjust it as yours makes 3 columns (col1 - title 1, col 2- body 1, col 3 - message 1) and then makes another div of 3 columns. Thats a lot closer to the solution I need but it's not quite it. I need to restructure data so i can have (col1 - title1, body 1, message1, col 2-> t1,b1,m1..etc to col3 then new group.
– powajoj
Mar 9 at 10:21
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55074582%2fv-for-render-or-dont-render-div-on-x-iteration%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown