I am confused on how to hide and show 3 divs according to the click.
I have been able to show and hide 2 divs with v-show but v-show does not apply I think for more than 2 divs.
This is my code without vuejs, because I don't understand how to render with v-else-if
<div id="element_one">
ONE
<a>Go to two</a>
<a>Go to three</a>
Some content
</div>
<div id="element_two>
<a>Go back to one</a>
Some content
</div>
<div id="element_three>
<a>Go back to one</a>
Some content
</div>
app.js could be like this?
new Vue({
el: '#app',
data: {
isOne: true,
isTwo: true,
isThree: true
}
});
Sorry, I understand is a basic question but if you could guide me.
I saw what there is about v-else-if in the documentation but it is still not clear to me how to apply it.
I understand that each div applies a display none to it and when it is activated it disappears.
So basically it is, that two divs are in display none when the div that I accessed through its corresponding button is activated.
Thank you.
for using v if directive
<p v-if="inStock">{{product}}</p>
<p v-else-if="onSale">..</p>
<p v-else-if="onSale">..</p>
<p v-else-if="onSale">..</p>
and so on and the last is what`s below
<p v-else>..</>
you can also use v-show(note this toggles css property display:none)
<p v-show="showProductDetails">..</p>
<div id="element_one" v-if="visibleDivId == 1">
ONE
<a #click="showDivById(2)">Go to two</a>
<a #click="showDivById(3)>Go to three</a>
Some content
</div>
<div id="element_two v-if="visibleDivId == 2">
<a #click="showDivById(1)">Go back to one</a>
Some content
</div>
<div id="element_three v-if="visibleDivId == 3">
<a #click="showDivById(1)">Go back to one</a>
Some content
</div>
new Vue({
el: '#app',
data: {
visibleDivId: 1,
},
methods: {
showDivById(divId) {
this.visibleDivId = divId
}
}
});
You can write a function and use it to show or hide div on click.
Related
I am trying to get all images for a category using Vue
<div class="col-md-12 col-sm-2 p-2">
<a v-on:click="onCategoryManageImageClick($event)" data-target="#location-
category-images">
</span>
</a>
</div>
So the event onCategoryManageImageClick ($event) does not work, if I am adding a html block and then click on get image button.
this is index.js
methods:{
onImagesTabClick(){
this.$root.$emit('activated-tab:location-images');
},
onCategoriesTabClick(){
window.j1App.eventBus.$emit("j1-location-image-list:shown");
},
onCategoryManageImageClick: function(event) {console.log('working event..');
event.preventDefault();
window.j1App.eventBus.$emit("j1-location-category-image-
list:shown",event.currentTarget.id);
}
}
So basically it need to to work like we do in jQuery
$(document).on('click',function{
})
So it works either page load or if adding any new html element on DOM. same I want in Vue.
You cannot alter the Vue template outside of Vue. That won't work. Vue compiles the template once when starting up and adds the event listeners to the rendered elements. If you add elements afterwards, Vue will not know about them.
The correct way of doing this would be to add those new elements in Vue.
<div
class="col-md-12 col-sm-2 p-2"
v-for="item in items"
:key="item.id"
>
<a
v-on:click="onCategoryManageImageClick($event, item)"
data-target="#location-category-images"
>
</a>
</div>
See https://v2.vuejs.org/v2/guide/list.html for documentation. In this case you need the items array variable in data and add more array elements to it, if you need more links.
Try raplacing your a tag with p
<div class="col-md-12 col-sm-2 p-2">
<p v-on:click="onCategoryManageImageClick" data-target="#location-
category-images">
</p>
</div>
I have this couple of 'cards' with this content
<div class='card'>
<span>title one </span>
<button #click='open = !open'>show</button>
</div>
<div class='card'>
<span>title two </span>
<button #click='open = !open'>show</button>
</div>
Where in the same component I show this modal. What i need to show inside of it is if I click the first button, show title one, if I click button 2,show title 2 and so on...
What will be the best approach to do this task? (show in modal the card content)
First a couple of things:
ooen might be a typo, did you mean open?
=! looks like a single operator but it actually means open = !open in this context. Put a space between the = and ! to make it clear what it means.
If you want to control the visibility of two sections independently then you will need two separate data properties (open1 and open2). Use v-if or v-show to control the visibility.
new Vue({
el: '#app',
data: {
open1: false,
open2: false,
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="card">
<span v-if="open1">title 1</span>
<button #click="open1 = !open1">toggle</button>
</div>
<div class="card">
<span v-if="open2">title 2</span>
<button #click="open2 = !open2">toggle</button>
</div>
</div>
If you will have lots of these, then wrap the functionality into a separate component so you don't have to define open1, open2, ... and so on.
Vue.component('card', {
template: `
<div class="card">
<span v-if="open"><slot/></span>
<button #click="open = !open">toggle</button>
</div>`,
data() {
return {
open: false
}
}
})
new Vue({
el: '#app'
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<card>title 1</card>
<card>title 2</card>
</div>
I found the solution.
Create the cards data into a array of objects in the data instance
Use a v-for to loop through the cards
Create a method that capture the card clicked, create a projectSelected value in data
<button #click="showModal = !showModal,open(project)">Open</button>
captureProject(card) {
this.projectSelected = project;
},
Show the selected project inside the modal
{{ projectSelected .title }}
I have problem with displaying component with v-if.
In one component i have <div v-if="seen">...</div>.
In another component I have <button v-on:click="seen = !seen">...</button>.
In "var vue = nev Vue({...})" file, in data: I have seen: true and this is not working.
I found "solution" which works: example
and I tried this "function version" of data in my code, but it doesn't work too :/
Here is my code:
Main File
var vue = new Vue({
el: '#app',
components: {
Navigation,
Home,
Footer,
Login
},
data: function () {
return {
seen: true
}
},
template: "<div><navigation></navigation><login></login><home></home><Footer></Footer></div>"
})
template that I can't see
<div v-if="seen" id="loginbox">
<form>
<input type="text" placeholder="login" class="input is-rounded"/>
<input type="password" placeholder="password" class="input is-rounded"/>
</form>
</div>
button template
<div class="navbar-menu">
<div class="navbar-start"></div>
<div class="navbar-end">
<p class="nav-item">
<a class="nav-link" v-on:click="seen = !seen">Login</a>
</p>
<p class="nav-item">
<a class="nav-link">Register</a>
</p>
</div>
</div>
I expect that when I click on button, "loginbox" template will be shown.
EDIT:
I did it in half way. I used props (used export default...) in in template that I cannot seen. It not work properly, becouse now I can change value of "seen" only with button which is in this template. I'd like change value of it by button which is in another template.
You should somehow share data between components.
You can do it many ways, but for this case i suggest to use event handling https://v2.vuejs.org/v2/guide/events.html#ad
Edited your sandbox with example - https://codesandbox.io/s/mzq0r2w88j
I am new to Vue. When I use v-if, v-else-if, and v-else, the first two tags work well. But for v-else, it only change the context in {{}}.
html:
<div id="app">
<div v-if="isIf === 1">
isIf is 1：{{isIf}}
</div>
<div v-else-if="2">
isIf is 2：{{isIf}}
</div>
<div v-else>
isIf is not 1 or 2：{{isIf}}
</div>
</div>
js:
<script>
var app = new Vue({
el: '#app',
data: {
isIf: 1,
isShow: false
}
});
</script>
when I change the app.isIf=3 in console, it showed isIf is 2: 3. My last try is app.isIf=2, so it showed the context with last input. Any idea?
Your v-else-if condition is wrong - instead of
<div v-else-if="2">
it should be
<div v-else-if="isIf === 2">
Except for zero, any numerical value will be considered "true" in Javascripts. So your render logic is always around "v-if" and "v-else-if", it never reaches "v-else"
So i am making a Facebook-like website.
I am new to Vue and i got stuck at the comments.
I have set up a template for the posts with the like, dislike and comment buttons,
the only thing i dont know how to do is when u press the comment button i want the server responce data to be appended beneath the post and if you press it again i want the data to be hidden.Here is the template:
<template>
<div class="container">
<h2> Posts</h2>
<textarea id="post" cols="50" rows="2" placeholder="Send a post" v-
model="postBody"></textarea>
<button #click="sendPost()">Post</button>
<div class="card card-body" v-for="post in posts">
<h3>{{post.username}}</h3>
<p>{{post.postBody}}</p>
<h4>{{post.post_id}}</h4>
<small>{{post.created_at}}</small>
<span>{{post.likes}}<button #click="LikePost(post.post_id)">Like</button>
</span>
<span>{{post.dislikes}}<button
#click='DislikePost(post.post_id)'>Dislike</button></span>
<span>{{post.comments}}<button
#click='ShowComments(post.post_id)'>Comment</button></span>
</div>
</div>
</template>
<script type="text/javascript">
export default
{
data()
{
return {
posts: [],
post: {
id:'',
username:'',
postBody:'',
},
postBody:'',
post_id: '',
pagination: {},
edit: false
};`
P.S i am also new to stackoverflow so if a left any information out please let me know.
What you describe is a toggle. It corresponds to a boolean data item: true is on (comments displayed) false if off (comments not displayed). The method attached to the button switches the value of the boolean. A v-if directive controls the display of comments, based on the boolean.
I've stripped your example down to just the relevant code.
new Vue({
el: '#app',
data: {
comments: 'This is comments',
commentsVisible: false
},
methods: {
toggleComments() {
this.commentsVisible = !this.commentsVisible;
}
}
});
<script src="//unpkg.com/vue#latest/dist/vue.js"></script>
<div id="app">
<h2> Posts</h2>
<span>
<template v-if="commentsVisible">{{comments}}</template>
<button #click='toggleComments'>Comment</button>
</span>
</div>