Как отобразить компоненты при клике Vue js
Вам необходимо использовать систему событий в Vue. На кнопку вешаете событие click с методом onClick, а в методе создаете событие, можете назвать его как угодно, в этом примере я назову его previewButtonWasClicked которое поднимется из компонента в родитель.
{
methods: {
onClick (e) {
this.$emit("previewButtonWasClicked", e);
}
}
}
Теперь в родителе мы можем поймать событие previewButtonWasClicked, и повесить метод на это событие, который будет делать все что Вам нужно.
------------------
https://jsfiddle.net/dimasgrig1575/5f2m41p3/5/
js карусель
#gallery{
width: 640px;
margin: 20px auto;
text-align: center;
}
#gallery .photos img{
width: 100%;
display: none;
}
#gallery .photos img:first-child{
display: block;
}
.buttons {
margin-top: 20px;
}
let btn_prev = document.querySelector('#gallery .buttons .prev');
let btn_next = document.querySelector('#gallery .buttons .next');
let images = document.querySelectorAll('#gallery .photos img');
btn_prev.onclick = function(){
images[i].style.display = 'none';
i = i - 1;
if(i < 0){
i = images.length - 1;
}
images[i].style.display = 'block';
}
-----
Как в javascript "закрывать" div при клике вне этого дива? //open
$(document).mouseup(function (e) {
var container = $("YOUR CONTAINER SELECTOR");
if (container.has(e.target).length === 0){
container.hide();
}
});
--
Вот ещё:
$(".button").click(function() {
$('.toggled_block').toggle();
});
$(document).on('click', function(e) {
if (!$(e.target).closest(".parent_block").length) {
$('.toggled_block').hide();
}
e.stopPropagation();
});
.parent_block {
width: 200px;
height: 100px;
}
.button {
width: 200px;
height: 50px;
background: #00BB65;
border-radius: 5px;
overflow: hidden;
}
.toggled_block {
width: 200px;
height: 50px;
background: #fff;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #ccc;
display: none;
}