Using a mixin on two components: it calls the method on only the first component
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
0
I have two components that need to share a method. I used a mixin for this method and added the mixin to both components. When I click on the second component it fires off the method on the first component instead of the second one - in this case, it opens the top drop down and not the second drop down.
Here is a snippet of my code...
// Mixins
var showDropdownMixin = {
data() {
return {
activeTrigger: false,
dropdown: false
}
},
methods: {
showDropdown: function(){
if(this.dropdown == false){
this.dropdown = true;
this.activeTrigger = true;
TweenMax.fromTo(
"#dropdown",
0.55,
{
autoAlpha: 0,
y: -10
},
{
autoAlpha: 1,
y: 0,
ease: Power2.easeOut
}
);
}else{
this.dropdown = false;
this.activeTrigger = false;
TweenMax.to(
"#dropdown",
0.2,
{
autoAlpha: 0,
y: -10,
ease: Power2.easeOut
});
}
}
}
}
//Global Components
Vue.component('photo-questions', {
data() {
return {
filters: [
"Q2: Message: Vermont Village 8oz Sipping Vinegar products have had issues with…",
"Q10: This is the second photo question.",
"Q11: This is the third photo question.",
"Q12: This is the fourth photo question.",
"Q13: This is the fifth photo question.",
"Q14: This is the sixth photo question.",
"Q15: This is the seventh photo question.",
"Q16: This is the eighth photo question.",
"Q17: This is the ninth photo question.",
"Q18: This is the tenth photo question.",
"Q19: This is the eleventh photo question.",
"Q20: This is the twelfth photo question."
],
checkedFilters: ,
allSelected: true,
selectAllText: 'Select All'
};
},
template: '#photo-questions-template',
computed: {
filteredList() {
return this.filters.filter(item => {
return item.toLowerCase();
});
}
},
methods: {
selectAll: function() {
this.checkedFilters = ;
this.selectAllText = this.selectAllText == "Select All" ? 'Clear All' : 'Select All';
if (this.allSelected) {
for (filter in this.filters) {
this.checkedFilters.push(this.filters[filter].toString());
}
}
}
},
mixins: [showDropdownMixin]
})
Vue.component('associated-questions', {
data() {
return {
filters: [
"Q2: Message: Vermont Village 8oz Sipping Vinegar products have had issues with…",
"Q10: This is the second photo question.",
"Q11: This is the third photo question.",
"Q12: This is the fourth photo question.",
"Q13: This is the fifth photo question.",
"Q14: This is the sixth photo question.",
"Q15: This is the seventh photo question.",
"Q16: This is the eighth photo question.",
"Q17: This is the ninth photo question.",
"Q18: This is the tenth photo question.",
"Q19: This is the eleventh photo question.",
"Q20: This is the twelfth photo question."
],
checkedFilters: ,
allSelected: true,
selectAllText: 'Select All'
};
},
template: '#associated-questions-template',
computed: {
filteredList() {
return this.filters.filter(item => {
return item.toLowerCase();
});
}
},
methods: {
selectAll: function() {
this.checkedFilters = ;
this.selectAllText = this.selectAllText == "Select All" ? 'Clear All' : 'Select All';
if (this.allSelected) {
for (filter in this.filters) {
this.checkedFilters.push(this.filters[filter].toString());
}
}
}
},
mixins: [showDropdownMixin]
})
//Main Vue Instance
function run_app(){
const searchFilters = new Vue({
el: '#searchFilters',
data: {
title: "Vue is working"
},
});
};
window.addEventListener("load", function(event){
run_app()
});/**********************
Global Styles
***********************/
body {
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
}
*, :after, :before {
box-sizing: border-box;
}
/**********************
Tab/Container
***********************/
#active-tab {
color: #fff;
cursor: default;
background-color: #2CACDF;
border: 1px solid #2CACDF;
border-bottom-color: transparent;
}
#active-tab:hover {
color: #fff;
cursor: pointer;
background-color: #2CACDF;
border: 1px solid #2CACDF;
}
.nav-tabs li a {
font-size: 1.25rem;
font-weight: bold;
}
.search-container {
border: 1px solid #ddd;
padding : 25px 15px;
}
.search-container select {
width: 100%;
}
/**********************
Search/Filters
***********************/
.search-container input {
margin-right: 5rem;
}
.checkbox-select {
position: relative;
max-width: 800px;
width: 100%;
margin: 2rem 0;
}
.checkbox-select li {
list-style: none;
}
.checkbox-select__trigger {
border-radius: 2px;
background: #fff;
box-shadow: 3px 3px 12px 1px rgba(0, 0, 0, 0.2);
height: 40px;
display: flex;
align-items: center;
cursor: pointer;
padding: 0 25px;
transition: all 0.4s ease;
}
.checkbox-select__trigger.isActive svg {
transform: rotate(-180deg);
}
.checkbox-select__trigger svg {
width: 1rem;
transition: all 0.4s ease;
}
.checkbox-select__title {
font-size: 1.25rem;
font-weight: bold;
flex: 1;
padding-right: 1rem;
}
.checkbox-select__dropdown {
opacity: 0;
visibility: hidden;
background: #fff;
position: absolute;
left: 0;
right: 0;
box-shadow: 3px 3px 12px 1px rgba(0, 0, 0, 0.2);
border-radius: 0;
overflow: hidden;
padding-bottom: 25px;
z-index: 1000;
}
.checkbox-select__dropdown .simplebar-scrollbar {
width: 3px;
right: 1px;
}
.checkbox-select__col {
display: flex;
font-size: 1rem;
padding: 25px 25px 0px 25px;
justify-content: space-between;
text-transform: uppercase;
}
.checkbox-select__select-all label {
cursor: pointer;
}
.checkbox-select__select-all input {
display: none;
}
.checkbox-select__filters-wrapp {
margin-top: 20px;
padding-left: 2.5rem;
height: 150px;
overflow-y: auto;
}
.checkbox-select__check-wrapp {
position: relative;
padding: 0;
margin-bottom: 10px;
}
.checkbox-select__check-wrapp input[type="checkbox"] {
display: none;
}
.checkbox-select__check-wrapp input[type="checkbox"] + label {
position: relative;
cursor: pointer;
font-size: 1rem;
line-height: 22px;
padding-left: 30px;
display: inline-block;
transition: padding 0.25s ease;
}
.checkbox-select__check-wrapp input[type="checkbox"] + label:after {
border: solid 1px #c7c7c7;
border-radius: 3px;
content: "";
width: 18px;
height: 18px;
top: 0;
left: 0;
position: absolute;
}
.checkbox-select__check-wrapp input[type="checkbox"] + label:before {
width: 10px;
height: 10px;
content: "";
position: absolute;
top: 4px;
left: 4px;
background-color: #2cacdF;
opacity: 0;
will-change: transform;
transform: scale(0.5);
transition: all 0.2s ease;
}
.checkbox-select__check-wrapp input[type="checkbox"] + label:hover {
padding-left: 32px;
}
.checkbox-select__check-wrapp input[type="checkbox"]:checked + label:before {
opacity: 1;
transform: scale(1);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-tabs">
<li class="active"><a>Review Photos</a></li>
<li><a href="#" id="active-tab">Mass Approvals Page</a></li>
</ul>
<div id="searchFilters" class="search-container container-fluid">
<div class="col-md-12">
<label for="project-id">Project ID:</label>
<input type="text" id="project-id" name="project-id">
<label for="job-id">Job ID:</label>
<input type="text" id="job-id" name="job-id">
<label for="all-photo-questions">All Photo Questions:</label>
<input type="checkbox" id="all-photo-questions" name="all-photo-questions">
<button>Reset Filters</button>
</div>
<div class="col-md-6">
<photo-questions></photo-questions>
<associated-questions></associated-questions>
</div>
<div class="col-md-6">
</div>
</div>
<!-- Component Templates -->
<script type="text/x-template" id="photo-questions-template">
<div class="checkbox-select">
<div class="checkbox-select__trigger" :class="{ isActive: activeTrigger }" @click="showDropdown()">
<span class="checkbox-select__title">Photo Questions:</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129"><path d="M121.3 34.6c-1.6-1.6-4.2-1.6-5.8 0l-51 51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8 0-1.6 1.6-1.6 4.2 0 5.8l53.9 53.9c.8.8 1.8 1.2 2.9 1.2 1 0 2.1-.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2.1-5.8z"/></svg>
</div>
<div id="dropdown" class="checkbox-select__dropdown">
<div class="checkbox-select__col">
<div class="checkbox-select__select-all">
<label for="selectAll">{{selectAllText}}</label>
<input type="checkbox" id="selectAll" @click="selectAll" v-model="allSelected">
</div>
<div class="checkbox-select__info">
{{checkedFilters.length}} SELECTED
</div>
</div>
<ul id="customScroll" class="checkbox-select__filters-wrapp" data-simplebar-auto-hide="false">
<li v-for="(filter, index) in filteredList">
<div class="checkbox-select__check-wrapp">
<input :id="index" class="conditions-check" v-model="checkedFilters" :value="filter" type="checkbox">
<label :for="index">{{filter}}</label>
</div>
</li>
</ul>
</div>
</div>
</script>
<script type="text/x-template" id="associated-questions-template">
<div class="checkbox-select">
<div class="checkbox-select__trigger" :class="{ isActive: activeTrigger }" @click="showDropdown()">
<span class="checkbox-select__title">Associated Questions:</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129"><path d="M121.3 34.6c-1.6-1.6-4.2-1.6-5.8 0l-51 51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8 0-1.6 1.6-1.6 4.2 0 5.8l53.9 53.9c.8.8 1.8 1.2 2.9 1.2 1 0 2.1-.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2.1-5.8z"/></svg>
</div>
<div id="dropdown" class="checkbox-select__dropdown">
<div class="checkbox-select__col">
<div class="checkbox-select__select-all">
<label for="selectAll">{{selectAllText}}</label>
<input type="checkbox" id="selectAll" @click="selectAll" v-model="allSelected">
</div>
<div class="checkbox-select__info">
{{checkedFilters.length}} SELECTED
</div>
</div>
<ul id="customScroll" class="checkbox-select__filters-wrapp" data-simplebar-auto-hide="false">
<li v-for="(filter, index) in filteredList">
<div class="checkbox-select__check-wrapp">
<input :id="index" class="conditions-check" v-model="checkedFilters" :value="filter" type="checkbox">
<label :for="index">{{filter}}</label>
</div>
</li>
</ul>
</div>
</div>
</script>javascript vue.js vuejs2 vue-component vue-mixin
edited Nov 16 '18 at 20:06
chazsolo
5,41011234
asked Nov 16 '18 at 19:47
AndrewTheGeekAndrewTheGeek
114
add a comment |
0
I have two components that need to share a method. I used a mixin for this method and added the mixin to both components. When I click on the second component it fires off the method on the first component instead of the second one - in this case, it opens the top drop down and not the second drop down.
Here is a snippet of my code...
// Mixins
var showDropdownMixin = {
data() {
return {
activeTrigger: false,
dropdown: false
}
},
methods: {
showDropdown: function(){
if(this.dropdown == false){
this.dropdown = true;
this.activeTrigger = true;
TweenMax.fromTo(
"#dropdown",
0.55,
{
autoAlpha: 0,
y: -10
},
{
autoAlpha: 1,
y: 0,
ease: Power2.easeOut
}
);
}else{
this.dropdown = false;
this.activeTrigger = false;
TweenMax.to(
"#dropdown",
0.2,
{
autoAlpha: 0,
y: -10,
ease: Power2.easeOut
});
}
}
}
}
//Global Components
Vue.component('photo-questions', {
data() {
return {
filters: [
"Q2: Message: Vermont Village 8oz Sipping Vinegar products have had issues with…",
"Q10: This is the second photo question.",
"Q11: This is the third photo question.",
"Q12: This is the fourth photo question.",
"Q13: This is the fifth photo question.",
"Q14: This is the sixth photo question.",
"Q15: This is the seventh photo question.",
"Q16: This is the eighth photo question.",
"Q17: This is the ninth photo question.",
"Q18: This is the tenth photo question.",
"Q19: This is the eleventh photo question.",
"Q20: This is the twelfth photo question."
],
checkedFilters: ,
allSelected: true,
selectAllText: 'Select All'
};
},
template: '#photo-questions-template',
computed: {
filteredList() {
return this.filters.filter(item => {
return item.toLowerCase();
});
}
},
methods: {
selectAll: function() {
this.checkedFilters = ;
this.selectAllText = this.selectAllText == "Select All" ? 'Clear All' : 'Select All';
if (this.allSelected) {
for (filter in this.filters) {
this.checkedFilters.push(this.filters[filter].toString());
}
}
}
},
mixins: [showDropdownMixin]
})
Vue.component('associated-questions', {
data() {
return {
filters: [
"Q2: Message: Vermont Village 8oz Sipping Vinegar products have had issues with…",
"Q10: This is the second photo question.",
"Q11: This is the third photo question.",
"Q12: This is the fourth photo question.",
"Q13: This is the fifth photo question.",
"Q14: This is the sixth photo question.",
"Q15: This is the seventh photo question.",
"Q16: This is the eighth photo question.",
"Q17: This is the ninth photo question.",
"Q18: This is the tenth photo question.",
"Q19: This is the eleventh photo question.",
"Q20: This is the twelfth photo question."
],
checkedFilters: ,
allSelected: true,
selectAllText: 'Select All'
};
},
template: '#associated-questions-template',
computed: {
filteredList() {
return this.filters.filter(item => {
return item.toLowerCase();
});
}
},
methods: {
selectAll: function() {
this.checkedFilters = ;
this.selectAllText = this.selectAllText == "Select All" ? 'Clear All' : 'Select All';
if (this.allSelected) {
for (filter in this.filters) {
this.checkedFilters.push(this.filters[filter].toString());
}
}
}
},
mixins: [showDropdownMixin]
})
//Main Vue Instance
function run_app(){
const searchFilters = new Vue({
el: '#searchFilters',
data: {
title: "Vue is working"
},
});
};
window.addEventListener("load", function(event){
run_app()
});/**********************
Global Styles
***********************/
body {
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
}
*, :after, :before {
box-sizing: border-box;
}
/**********************
Tab/Container
***********************/
#active-tab {
color: #fff;
cursor: default;
background-color: #2CACDF;
border: 1px solid #2CACDF;
border-bottom-color: transparent;
}
#active-tab:hover {
color: #fff;
cursor: pointer;
background-color: #2CACDF;
border: 1px solid #2CACDF;
}
.nav-tabs li a {
font-size: 1.25rem;
font-weight: bold;
}
.search-container {
border: 1px solid #ddd;
padding : 25px 15px;
}
.search-container select {
width: 100%;
}
/**********************
Search/Filters
***********************/
.search-container input {
margin-right: 5rem;
}
.checkbox-select {
position: relative;
max-width: 800px;
width: 100%;
margin: 2rem 0;
}
.checkbox-select li {
list-style: none;
}
.checkbox-select__trigger {
border-radius: 2px;
background: #fff;
box-shadow: 3px 3px 12px 1px rgba(0, 0, 0, 0.2);
height: 40px;
display: flex;
align-items: center;
cursor: pointer;
padding: 0 25px;
transition: all 0.4s ease;
}
.checkbox-select__trigger.isActive svg {
transform: rotate(-180deg);
}
.checkbox-select__trigger svg {
width: 1rem;
transition: all 0.4s ease;
}
.checkbox-select__title {
font-size: 1.25rem;
font-weight: bold;
flex: 1;
padding-right: 1rem;
}
.checkbox-select__dropdown {
opacity: 0;
visibility: hidden;
background: #fff;
position: absolute;
left: 0;
right: 0;
box-shadow: 3px 3px 12px 1px rgba(0, 0, 0, 0.2);
border-radius: 0;
overflow: hidden;
padding-bottom: 25px;
z-index: 1000;
}
.checkbox-select__dropdown .simplebar-scrollbar {
width: 3px;
right: 1px;
}
.checkbox-select__col {
display: flex;
font-size: 1rem;
padding: 25px 25px 0px 25px;
justify-content: space-between;
text-transform: uppercase;
}
.checkbox-select__select-all label {
cursor: pointer;
}
.checkbox-select__select-all input {
display: none;
}
.checkbox-select__filters-wrapp {
margin-top: 20px;
padding-left: 2.5rem;
height: 150px;
overflow-y: auto;
}
.checkbox-select__check-wrapp {
position: relative;
padding: 0;
margin-bottom: 10px;
}
.checkbox-select__check-wrapp input[type="checkbox"] {
display: none;
}
.checkbox-select__check-wrapp input[type="checkbox"] + label {
position: relative;
cursor: pointer;
font-size: 1rem;
line-height: 22px;
padding-left: 30px;
display: inline-block;
transition: padding 0.25s ease;
}
.checkbox-select__check-wrapp input[type="checkbox"] + label:after {
border: solid 1px #c7c7c7;
border-radius: 3px;
content: "";
width: 18px;
height: 18px;
top: 0;
left: 0;
position: absolute;
}
.checkbox-select__check-wrapp input[type="checkbox"] + label:before {
width: 10px;
height: 10px;
content: "";
position: absolute;
top: 4px;
left: 4px;
background-color: #2cacdF;
opacity: 0;
will-change: transform;
transform: scale(0.5);
transition: all 0.2s ease;
}
.checkbox-select__check-wrapp input[type="checkbox"] + label:hover {
padding-left: 32px;
}
.checkbox-select__check-wrapp input[type="checkbox"]:checked + label:before {
opacity: 1;
transform: scale(1);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-tabs">
<li class="active"><a>Review Photos</a></li>
<li><a href="#" id="active-tab">Mass Approvals Page</a></li>
</ul>
<div id="searchFilters" class="search-container container-fluid">
<div class="col-md-12">
<label for="project-id">Project ID:</label>
<input type="text" id="project-id" name="project-id">
<label for="job-id">Job ID:</label>
<input type="text" id="job-id" name="job-id">
<label for="all-photo-questions">All Photo Questions:</label>
<input type="checkbox" id="all-photo-questions" name="all-photo-questions">
<button>Reset Filters</button>
</div>
<div class="col-md-6">
<photo-questions></photo-questions>
<associated-questions></associated-questions>
</div>
<div class="col-md-6">
</div>
</div>
<!-- Component Templates -->
<script type="text/x-template" id="photo-questions-template">
<div class="checkbox-select">
<div class="checkbox-select__trigger" :class="{ isActive: activeTrigger }" @click="showDropdown()">
<span class="checkbox-select__title">Photo Questions:</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129"><path d="M121.3 34.6c-1.6-1.6-4.2-1.6-5.8 0l-51 51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8 0-1.6 1.6-1.6 4.2 0 5.8l53.9 53.9c.8.8 1.8 1.2 2.9 1.2 1 0 2.1-.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2.1-5.8z"/></svg>
</div>
<div id="dropdown" class="checkbox-select__dropdown">
<div class="checkbox-select__col">
<div class="checkbox-select__select-all">
<label for="selectAll">{{selectAllText}}</label>
<input type="checkbox" id="selectAll" @click="selectAll" v-model="allSelected">
</div>
<div class="checkbox-select__info">
{{checkedFilters.length}} SELECTED
</div>
</div>
<ul id="customScroll" class="checkbox-select__filters-wrapp" data-simplebar-auto-hide="false">
<li v-for="(filter, index) in filteredList">
<div class="checkbox-select__check-wrapp">
<input :id="index" class="conditions-check" v-model="checkedFilters" :value="filter" type="checkbox">
<label :for="index">{{filter}}</label>
</div>
</li>
</ul>
</div>
</div>
</script>
<script type="text/x-template" id="associated-questions-template">
<div class="checkbox-select">
<div class="checkbox-select__trigger" :class="{ isActive: activeTrigger }" @click="showDropdown()">
<span class="checkbox-select__title">Associated Questions:</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129"><path d="M121.3 34.6c-1.6-1.6-4.2-1.6-5.8 0l-51 51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8 0-1.6 1.6-1.6 4.2 0 5.8l53.9 53.9c.8.8 1.8 1.2 2.9 1.2 1 0 2.1-.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2.1-5.8z"/></svg>
</div>
<div id="dropdown" class="checkbox-select__dropdown">
<div class="checkbox-select__col">
<div class="checkbox-select__select-all">
<label for="selectAll">{{selectAllText}}</label>
<input type="checkbox" id="selectAll" @click="selectAll" v-model="allSelected">
</div>
<div class="checkbox-select__info">
{{checkedFilters.length}} SELECTED
</div>
</div>
<ul id="customScroll" class="checkbox-select__filters-wrapp" data-simplebar-auto-hide="false">
<li v-for="(filter, index) in filteredList">
<div class="checkbox-select__check-wrapp">
<input :id="index" class="conditions-check" v-model="checkedFilters" :value="filter" type="checkbox">
<label :for="index">{{filter}}</label>
</div>
</li>
</ul>
</div>
</div>
</script>javascript vue.js vuejs2 vue-component vue-mixin
edited Nov 16 '18 at 20:06
chazsolo
5,41011234
asked Nov 16 '18 at 19:47
AndrewTheGeekAndrewTheGeek
114
add a comment |
0
0
0
I have two components that need to share a method. I used a mixin for this method and added the mixin to both components. When I click on the second component it fires off the method on the first component instead of the second one - in this case, it opens the top drop down and not the second drop down.
Here is a snippet of my code...
// Mixins
var showDropdownMixin = {
data() {
return {
activeTrigger: false,
dropdown: false
}
},
methods: {
showDropdown: function(){
if(this.dropdown == false){
this.dropdown = true;
this.activeTrigger = true;
TweenMax.fromTo(
"#dropdown",
0.55,
{
autoAlpha: 0,
y: -10
},
{
autoAlpha: 1,
y: 0,
ease: Power2.easeOut
}
);
}else{
this.dropdown = false;
this.activeTrigger = false;
TweenMax.to(
"#dropdown",
0.2,
{
autoAlpha: 0,
y: -10,
ease: Power2.easeOut
});
}
}
}
}
//Global Components
Vue.component('photo-questions', {
data() {
return {
filters: [
"Q2: Message: Vermont Village 8oz Sipping Vinegar products have had issues with…",
"Q10: This is the second photo question.",
"Q11: This is the third photo question.",
"Q12: This is the fourth photo question.",
"Q13: This is the fifth photo question.",
"Q14: This is the sixth photo question.",
"Q15: This is the seventh photo question.",
"Q16: This is the eighth photo question.",
"Q17: This is the ninth photo question.",
"Q18: This is the tenth photo question.",
"Q19: This is the eleventh photo question.",
"Q20: This is the twelfth photo question."
],
checkedFilters: ,
allSelected: true,
selectAllText: 'Select All'
};
},
template: '#photo-questions-template',
computed: {
filteredList() {
return this.filters.filter(item => {
return item.toLowerCase();
});
}
},
methods: {
selectAll: function() {
this.checkedFilters = ;
this.selectAllText = this.selectAllText == "Select All" ? 'Clear All' : 'Select All';
if (this.allSelected) {
for (filter in this.filters) {
this.checkedFilters.push(this.filters[filter].toString());
}
}
}
},
mixins: [showDropdownMixin]
})
Vue.component('associated-questions', {
data() {
return {
filters: [
"Q2: Message: Vermont Village 8oz Sipping Vinegar products have had issues with…",
"Q10: This is the second photo question.",
"Q11: This is the third photo question.",
"Q12: This is the fourth photo question.",
"Q13: This is the fifth photo question.",
"Q14: This is the sixth photo question.",
"Q15: This is the seventh photo question.",
"Q16: This is the eighth photo question.",
"Q17: This is the ninth photo question.",
"Q18: This is the tenth photo question.",
"Q19: This is the eleventh photo question.",
"Q20: This is the twelfth photo question."
],
checkedFilters: ,
allSelected: true,
selectAllText: 'Select All'
};
},
template: '#associated-questions-template',
computed: {
filteredList() {
return this.filters.filter(item => {
return item.toLowerCase();
});
}
},
methods: {
selectAll: function() {
this.checkedFilters = ;
this.selectAllText = this.selectAllText == "Select All" ? 'Clear All' : 'Select All';
if (this.allSelected) {
for (filter in this.filters) {
this.checkedFilters.push(this.filters[filter].toString());
}
}
}
},
mixins: [showDropdownMixin]
})
//Main Vue Instance
function run_app(){
const searchFilters = new Vue({
el: '#searchFilters',
data: {
title: "Vue is working"
},
});
};
window.addEventListener("load", function(event){
run_app()
});/**********************
Global Styles
***********************/
body {
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
}
*, :after, :before {
box-sizing: border-box;
}
/**********************
Tab/Container
***********************/
#active-tab {
color: #fff;
cursor: default;
background-color: #2CACDF;
border: 1px solid #2CACDF;
border-bottom-color: transparent;
}
#active-tab:hover {
color: #fff;
cursor: pointer;
background-color: #2CACDF;
border: 1px solid #2CACDF;
}
.nav-tabs li a {
font-size: 1.25rem;
font-weight: bold;
}
.search-container {
border: 1px solid #ddd;
padding : 25px 15px;
}
.search-container select {
width: 100%;
}
/**********************
Search/Filters
***********************/
.search-container input {
margin-right: 5rem;
}
.checkbox-select {
position: relative;
max-width: 800px;
width: 100%;
margin: 2rem 0;
}
.checkbox-select li {
list-style: none;
}
.checkbox-select__trigger {
border-radius: 2px;
background: #fff;
box-shadow: 3px 3px 12px 1px rgba(0, 0, 0, 0.2);
height: 40px;
display: flex;
align-items: center;
cursor: pointer;
padding: 0 25px;
transition: all 0.4s ease;
}
.checkbox-select__trigger.isActive svg {
transform: rotate(-180deg);
}
.checkbox-select__trigger svg {
width: 1rem;
transition: all 0.4s ease;
}
.checkbox-select__title {
font-size: 1.25rem;
font-weight: bold;
flex: 1;
padding-right: 1rem;
}
.checkbox-select__dropdown {
opacity: 0;
visibility: hidden;
background: #fff;
position: absolute;
left: 0;
right: 0;
box-shadow: 3px 3px 12px 1px rgba(0, 0, 0, 0.2);
border-radius: 0;
overflow: hidden;
padding-bottom: 25px;
z-index: 1000;
}
.checkbox-select__dropdown .simplebar-scrollbar {
width: 3px;
right: 1px;
}
.checkbox-select__col {
display: flex;
font-size: 1rem;
padding: 25px 25px 0px 25px;
justify-content: space-between;
text-transform: uppercase;
}
.checkbox-select__select-all label {
cursor: pointer;
}
.checkbox-select__select-all input {
display: none;
}
.checkbox-select__filters-wrapp {
margin-top: 20px;
padding-left: 2.5rem;
height: 150px;
overflow-y: auto;
}
.checkbox-select__check-wrapp {
position: relative;
padding: 0;
margin-bottom: 10px;
}
.checkbox-select__check-wrapp input[type="checkbox"] {
display: none;
}
.checkbox-select__check-wrapp input[type="checkbox"] + label {
position: relative;
cursor: pointer;
font-size: 1rem;
line-height: 22px;
padding-left: 30px;
display: inline-block;
transition: padding 0.25s ease;
}
.checkbox-select__check-wrapp input[type="checkbox"] + label:after {
border: solid 1px #c7c7c7;
border-radius: 3px;
content: "";
width: 18px;
height: 18px;
top: 0;
left: 0;
position: absolute;
}
.checkbox-select__check-wrapp input[type="checkbox"] + label:before {
width: 10px;
height: 10px;
content: "";
position: absolute;
top: 4px;
left: 4px;
background-color: #2cacdF;
opacity: 0;
will-change: transform;
transform: scale(0.5);
transition: all 0.2s ease;
}
.checkbox-select__check-wrapp input[type="checkbox"] + label:hover {
padding-left: 32px;
}
.checkbox-select__check-wrapp input[type="checkbox"]:checked + label:before {
opacity: 1;
transform: scale(1);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-tabs">
<li class="active"><a>Review Photos</a></li>
<li><a href="#" id="active-tab">Mass Approvals Page</a></li>
</ul>
<div id="searchFilters" class="search-container container-fluid">
<div class="col-md-12">
<label for="project-id">Project ID:</label>
<input type="text" id="project-id" name="project-id">
<label for="job-id">Job ID:</label>
<input type="text" id="job-id" name="job-id">
<label for="all-photo-questions">All Photo Questions:</label>
<input type="checkbox" id="all-photo-questions" name="all-photo-questions">
<button>Reset Filters</button>
</div>
<div class="col-md-6">
<photo-questions></photo-questions>
<associated-questions></associated-questions>
</div>
<div class="col-md-6">
</div>
</div>
<!-- Component Templates -->
<script type="text/x-template" id="photo-questions-template">
<div class="checkbox-select">
<div class="checkbox-select__trigger" :class="{ isActive: activeTrigger }" @click="showDropdown()">
<span class="checkbox-select__title">Photo Questions:</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129"><path d="M121.3 34.6c-1.6-1.6-4.2-1.6-5.8 0l-51 51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8 0-1.6 1.6-1.6 4.2 0 5.8l53.9 53.9c.8.8 1.8 1.2 2.9 1.2 1 0 2.1-.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2.1-5.8z"/></svg>
</div>
<div id="dropdown" class="checkbox-select__dropdown">
<div class="checkbox-select__col">
<div class="checkbox-select__select-all">
<label for="selectAll">{{selectAllText}}</label>
<input type="checkbox" id="selectAll" @click="selectAll" v-model="allSelected">
</div>
<div class="checkbox-select__info">
{{checkedFilters.length}} SELECTED
</div>
</div>
<ul id="customScroll" class="checkbox-select__filters-wrapp" data-simplebar-auto-hide="false">
<li v-for="(filter, index) in filteredList">
<div class="checkbox-select__check-wrapp">
<input :id="index" class="conditions-check" v-model="checkedFilters" :value="filter" type="checkbox">
<label :for="index">{{filter}}</label>
</div>
</li>
</ul>
</div>
</div>
</script>
<script type="text/x-template" id="associated-questions-template">
<div class="checkbox-select">
<div class="checkbox-select__trigger" :class="{ isActive: activeTrigger }" @click="showDropdown()">
<span class="checkbox-select__title">Associated Questions:</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129"><path d="M121.3 34.6c-1.6-1.6-4.2-1.6-5.8 0l-51 51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8 0-1.6 1.6-1.6 4.2 0 5.8l53.9 53.9c.8.8 1.8 1.2 2.9 1.2 1 0 2.1-.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2.1-5.8z"/></svg>
</div>
<div id="dropdown" class="checkbox-select__dropdown">
<div class="checkbox-select__col">
<div class="checkbox-select__select-all">
<label for="selectAll">{{selectAllText}}</label>
<input type="checkbox" id="selectAll" @click="selectAll" v-model="allSelected">
</div>
<div class="checkbox-select__info">
{{checkedFilters.length}} SELECTED
</div>
</div>
<ul id="customScroll" class="checkbox-select__filters-wrapp" data-simplebar-auto-hide="false">
<li v-for="(filter, index) in filteredList">
<div class="checkbox-select__check-wrapp">
<input :id="index" class="conditions-check" v-model="checkedFilters" :value="filter" type="checkbox">
<label :for="index">{{filter}}</label>
</div>
</li>
</ul>
</div>
</div>
</script>javascript vue.js vuejs2 vue-component vue-mixin
edited Nov 16 '18 at 20:06
chazsolo
5,41011234
asked Nov 16 '18 at 19:47
AndrewTheGeekAndrewTheGeek
114
I have two components that need to share a method. I used a mixin for this method and added the mixin to both components. When I click on the second component it fires off the method on the first component instead of the second one - in this case, it opens the top drop down and not the second drop down.
Here is a snippet of my code...
// Mixins
var showDropdownMixin = {
data() {
return {
activeTrigger: false,
dropdown: false
}
},
methods: {
showDropdown: function(){
if(this.dropdown == false){
this.dropdown = true;
this.activeTrigger = true;
TweenMax.fromTo(
"#dropdown",
0.55,
{
autoAlpha: 0,
y: -10
},
{
autoAlpha: 1,
y: 0,
ease: Power2.easeOut
}
);
}else{
this.dropdown = false;
this.activeTrigger = false;
TweenMax.to(
"#dropdown",
0.2,
{
autoAlpha: 0,
y: -10,
ease: Power2.easeOut
});
}
}
}
}
//Global Components
Vue.component('photo-questions', {
data() {
return {
filters: [
"Q2: Message: Vermont Village 8oz Sipping Vinegar products have had issues with…",
"Q10: This is the second photo question.",
"Q11: This is the third photo question.",
"Q12: This is the fourth photo question.",
"Q13: This is the fifth photo question.",
"Q14: This is the sixth photo question.",
"Q15: This is the seventh photo question.",
"Q16: This is the eighth photo question.",
"Q17: This is the ninth photo question.",
"Q18: This is the tenth photo question.",
"Q19: This is the eleventh photo question.",
"Q20: This is the twelfth photo question."
],
checkedFilters: ,
allSelected: true,
selectAllText: 'Select All'
};
},
template: '#photo-questions-template',
computed: {
filteredList() {
return this.filters.filter(item => {
return item.toLowerCase();
});
}
},
methods: {
selectAll: function() {
this.checkedFilters = ;
this.selectAllText = this.selectAllText == "Select All" ? 'Clear All' : 'Select All';
if (this.allSelected) {
for (filter in this.filters) {
this.checkedFilters.push(this.filters[filter].toString());
}
}
}
},
mixins: [showDropdownMixin]
})
Vue.component('associated-questions', {
data() {
return {
filters: [
"Q2: Message: Vermont Village 8oz Sipping Vinegar products have had issues with…",
"Q10: This is the second photo question.",
"Q11: This is the third photo question.",
"Q12: This is the fourth photo question.",
"Q13: This is the fifth photo question.",
"Q14: This is the sixth photo question.",
"Q15: This is the seventh photo question.",
"Q16: This is the eighth photo question.",
"Q17: This is the ninth photo question.",
"Q18: This is the tenth photo question.",
"Q19: This is the eleventh photo question.",
"Q20: This is the twelfth photo question."
],
checkedFilters: ,
allSelected: true,
selectAllText: 'Select All'
};
},
template: '#associated-questions-template',
computed: {
filteredList() {
return this.filters.filter(item => {
return item.toLowerCase();
});
}
},
methods: {
selectAll: function() {
this.checkedFilters = ;
this.selectAllText = this.selectAllText == "Select All" ? 'Clear All' : 'Select All';
if (this.allSelected) {
for (filter in this.filters) {
this.checkedFilters.push(this.filters[filter].toString());
}
}
}
},
mixins: [showDropdownMixin]
})
//Main Vue Instance
function run_app(){
const searchFilters = new Vue({
el: '#searchFilters',
data: {
title: "Vue is working"
},
});
};
window.addEventListener("load", function(event){
run_app()
});/**********************
Global Styles
***********************/
body {
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
}
*, :after, :before {
box-sizing: border-box;
}
/**********************
Tab/Container
***********************/
#active-tab {
color: #fff;
cursor: default;
background-color: #2CACDF;
border: 1px solid #2CACDF;
border-bottom-color: transparent;
}
#active-tab:hover {
color: #fff;
cursor: pointer;
background-color: #2CACDF;
border: 1px solid #2CACDF;
}
.nav-tabs li a {
font-size: 1.25rem;
font-weight: bold;
}
.search-container {
border: 1px solid #ddd;
padding : 25px 15px;
}
.search-container select {
width: 100%;
}
/**********************
Search/Filters
***********************/
.search-container input {
margin-right: 5rem;
}
.checkbox-select {
position: relative;
max-width: 800px;
width: 100%;
margin: 2rem 0;
}
.checkbox-select li {
list-style: none;
}
.checkbox-select__trigger {
border-radius: 2px;
background: #fff;
box-shadow: 3px 3px 12px 1px rgba(0, 0, 0, 0.2);
height: 40px;
display: flex;
align-items: center;
cursor: pointer;
padding: 0 25px;
transition: all 0.4s ease;
}
.checkbox-select__trigger.isActive svg {
transform: rotate(-180deg);
}
.checkbox-select__trigger svg {
width: 1rem;
transition: all 0.4s ease;
}
.checkbox-select__title {
font-size: 1.25rem;
font-weight: bold;
flex: 1;
padding-right: 1rem;
}
.checkbox-select__dropdown {
opacity: 0;
visibility: hidden;
background: #fff;
position: absolute;
left: 0;
right: 0;
box-shadow: 3px 3px 12px 1px rgba(0, 0, 0, 0.2);
border-radius: 0;
overflow: hidden;
padding-bottom: 25px;
z-index: 1000;
}
.checkbox-select__dropdown .simplebar-scrollbar {
width: 3px;
right: 1px;
}
.checkbox-select__col {
display: flex;
font-size: 1rem;
padding: 25px 25px 0px 25px;
justify-content: space-between;
text-transform: uppercase;
}
.checkbox-select__select-all label {
cursor: pointer;
}
.checkbox-select__select-all input {
display: none;
}
.checkbox-select__filters-wrapp {
margin-top: 20px;
padding-left: 2.5rem;
height: 150px;
overflow-y: auto;
}
.checkbox-select__check-wrapp {
position: relative;
padding: 0;
margin-bottom: 10px;
}
.checkbox-select__check-wrapp input[type="checkbox"] {
display: none;
}
.checkbox-select__check-wrapp input[type="checkbox"] + label {
position: relative;
cursor: pointer;
font-size: 1rem;
line-height: 22px;
padding-left: 30px;
display: inline-block;
transition: padding 0.25s ease;
}
.checkbox-select__check-wrapp input[type="checkbox"] + label:after {
border: solid 1px #c7c7c7;
border-radius: 3px;
content: "";
width: 18px;
height: 18px;
top: 0;
left: 0;
position: absolute;
}
.checkbox-select__check-wrapp input[type="checkbox"] + label:before {
width: 10px;
height: 10px;
content: "";
position: absolute;
top: 4px;
left: 4px;
background-color: #2cacdF;
opacity: 0;
will-change: transform;
transform: scale(0.5);
transition: all 0.2s ease;
}
.checkbox-select__check-wrapp input[type="checkbox"] + label:hover {
padding-left: 32px;
}
.checkbox-select__check-wrapp input[type="checkbox"]:checked + label:before {
opacity: 1;
transform: scale(1);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-tabs">
<li class="active"><a>Review Photos</a></li>
<li><a href="#" id="active-tab">Mass Approvals Page</a></li>
</ul>
<div id="searchFilters" class="search-container container-fluid">
<div class="col-md-12">
<label for="project-id">Project ID:</label>
<input type="text" id="project-id" name="project-id">
<label for="job-id">Job ID:</label>
<input type="text" id="job-id" name="job-id">
<label for="all-photo-questions">All Photo Questions:</label>
<input type="checkbox" id="all-photo-questions" name="all-photo-questions">
<button>Reset Filters</button>
</div>
<div class="col-md-6">
<photo-questions></photo-questions>
<associated-questions></associated-questions>
</div>
<div class="col-md-6">
</div>
</div>
<!-- Component Templates -->
<script type="text/x-template" id="photo-questions-template">
<div class="checkbox-select">
<div class="checkbox-select__trigger" :class="{ isActive: activeTrigger }" @click="showDropdown()">
<span class="checkbox-select__title">Photo Questions:</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129"><path d="M121.3 34.6c-1.6-1.6-4.2-1.6-5.8 0l-51 51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8 0-1.6 1.6-1.6 4.2 0 5.8l53.9 53.9c.8.8 1.8 1.2 2.9 1.2 1 0 2.1-.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2.1-5.8z"/></svg>
</div>
<div id="dropdown" class="checkbox-select__dropdown">
<div class="checkbox-select__col">
<div class="checkbox-select__select-all">
<label for="selectAll">{{selectAllText}}</label>
<input type="checkbox" id="selectAll" @click="selectAll" v-model="allSelected">
</div>
<div class="checkbox-select__info">
{{checkedFilters.length}} SELECTED
</div>
</div>
<ul id="customScroll" class="checkbox-select__filters-wrapp" data-simplebar-auto-hide="false">
<li v-for="(filter, index) in filteredList">
<div class="checkbox-select__check-wrapp">
<input :id="index" class="conditions-check" v-model="checkedFilters" :value="filter" type="checkbox">
<label :for="index">{{filter}}</label>
</div>
</li>
</ul>
</div>
</div>
</script>
<script type="text/x-template" id="associated-questions-template">
<div class="checkbox-select">
<div class="checkbox-select__trigger" :class="{ isActive: activeTrigger }" @click="showDropdown()">
<span class="checkbox-select__title">Associated Questions:</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129"><path d="M121.3 34.6c-1.6-1.6-4.2-1.6-5.8 0l-51 51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8 0-1.6 1.6-1.6 4.2 0 5.8l53.9 53.9c.8.8 1.8 1.2 2.9 1.2 1 0 2.1-.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2.1-5.8z"/></svg>
</div>
<div id="dropdown" class="checkbox-select__dropdown">
<div class="checkbox-select__col">
<div class="checkbox-select__select-all">
<label for="selectAll">{{selectAllText}}</label>
<input type="checkbox" id="selectAll" @click="selectAll" v-model="allSelected">
</div>
<div class="checkbox-select__info">
{{checkedFilters.length}} SELECTED
</div>
</div>
<ul id="customScroll" class="checkbox-select__filters-wrapp" data-simplebar-auto-hide="false">
<li v-for="(filter, index) in filteredList">
<div class="checkbox-select__check-wrapp">
<input :id="index" class="conditions-check" v-model="checkedFilters" :value="filter" type="checkbox">
<label :for="index">{{filter}}</label>
</div>
</li>
</ul>
</div>
</div>
</script>// Mixins
var showDropdownMixin = {
data() {
return {
activeTrigger: false,
dropdown: false
}
},
methods: {
showDropdown: function(){
if(this.dropdown == false){
this.dropdown = true;
this.activeTrigger = true;
TweenMax.fromTo(
"#dropdown",
0.55,
{
autoAlpha: 0,
y: -10
},
{
autoAlpha: 1,
y: 0,
ease: Power2.easeOut
}
);
}else{
this.dropdown = false;
this.activeTrigger = false;
TweenMax.to(
"#dropdown",
0.2,
{
autoAlpha: 0,
y: -10,
ease: Power2.easeOut
});
}
}
}
}
//Global Components
Vue.component('photo-questions', {
data() {
return {
filters: [
"Q2: Message: Vermont Village 8oz Sipping Vinegar products have had issues with…",
"Q10: This is the second photo question.",
"Q11: This is the third photo question.",
"Q12: This is the fourth photo question.",
"Q13: This is the fifth photo question.",
"Q14: This is the sixth photo question.",
"Q15: This is the seventh photo question.",
"Q16: This is the eighth photo question.",
"Q17: This is the ninth photo question.",
"Q18: This is the tenth photo question.",
"Q19: This is the eleventh photo question.",
"Q20: This is the twelfth photo question."
],
checkedFilters: ,
allSelected: true,
selectAllText: 'Select All'
};
},
template: '#photo-questions-template',
computed: {
filteredList() {
return this.filters.filter(item => {
return item.toLowerCase();
});
}
},
methods: {
selectAll: function() {
this.checkedFilters = ;
this.selectAllText = this.selectAllText == "Select All" ? 'Clear All' : 'Select All';
if (this.allSelected) {
for (filter in this.filters) {
this.checkedFilters.push(this.filters[filter].toString());
}
}
}
},
mixins: [showDropdownMixin]
})
Vue.component('associated-questions', {
data() {
return {
filters: [
"Q2: Message: Vermont Village 8oz Sipping Vinegar products have had issues with…",
"Q10: This is the second photo question.",
"Q11: This is the third photo question.",
"Q12: This is the fourth photo question.",
"Q13: This is the fifth photo question.",
"Q14: This is the sixth photo question.",
"Q15: This is the seventh photo question.",
"Q16: This is the eighth photo question.",
"Q17: This is the ninth photo question.",
"Q18: This is the tenth photo question.",
"Q19: This is the eleventh photo question.",
"Q20: This is the twelfth photo question."
],
checkedFilters: ,
allSelected: true,
selectAllText: 'Select All'
};
},
template: '#associated-questions-template',
computed: {
filteredList() {
return this.filters.filter(item => {
return item.toLowerCase();
});
}
},
methods: {
selectAll: function() {
this.checkedFilters = ;
this.selectAllText = this.selectAllText == "Select All" ? 'Clear All' : 'Select All';
if (this.allSelected) {
for (filter in this.filters) {
this.checkedFilters.push(this.filters[filter].toString());
}
}
}
},
mixins: [showDropdownMixin]
})
//Main Vue Instance
function run_app(){
const searchFilters = new Vue({
el: '#searchFilters',
data: {
title: "Vue is working"
},
});
};
window.addEventListener("load", function(event){
run_app()
});/**********************
Global Styles
***********************/
body {
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
}
*, :after, :before {
box-sizing: border-box;
}
/**********************
Tab/Container
***********************/
#active-tab {
color: #fff;
cursor: default;
background-color: #2CACDF;
border: 1px solid #2CACDF;
border-bottom-color: transparent;
}
#active-tab:hover {
color: #fff;
cursor: pointer;
background-color: #2CACDF;
border: 1px solid #2CACDF;
}
.nav-tabs li a {
font-size: 1.25rem;
font-weight: bold;
}
.search-container {
border: 1px solid #ddd;
padding : 25px 15px;
}
.search-container select {
width: 100%;
}
/**********************
Search/Filters
***********************/
.search-container input {
margin-right: 5rem;
}
.checkbox-select {
position: relative;
max-width: 800px;
width: 100%;
margin: 2rem 0;
}
.checkbox-select li {
list-style: none;
}
.checkbox-select__trigger {
border-radius: 2px;
background: #fff;
box-shadow: 3px 3px 12px 1px rgba(0, 0, 0, 0.2);
height: 40px;
display: flex;
align-items: center;
cursor: pointer;
padding: 0 25px;
transition: all 0.4s ease;
}
.checkbox-select__trigger.isActive svg {
transform: rotate(-180deg);
}
.checkbox-select__trigger svg {
width: 1rem;
transition: all 0.4s ease;
}
.checkbox-select__title {
font-size: 1.25rem;
font-weight: bold;
flex: 1;
padding-right: 1rem;
}
.checkbox-select__dropdown {
opacity: 0;
visibility: hidden;
background: #fff;
position: absolute;
left: 0;
right: 0;
box-shadow: 3px 3px 12px 1px rgba(0, 0, 0, 0.2);
border-radius: 0;
overflow: hidden;
padding-bottom: 25px;
z-index: 1000;
}
.checkbox-select__dropdown .simplebar-scrollbar {
width: 3px;
right: 1px;
}
.checkbox-select__col {
display: flex;
font-size: 1rem;
padding: 25px 25px 0px 25px;
justify-content: space-between;
text-transform: uppercase;
}
.checkbox-select__select-all label {
cursor: pointer;
}
.checkbox-select__select-all input {
display: none;
}
.checkbox-select__filters-wrapp {
margin-top: 20px;
padding-left: 2.5rem;
height: 150px;
overflow-y: auto;
}
.checkbox-select__check-wrapp {
position: relative;
padding: 0;
margin-bottom: 10px;
}
.checkbox-select__check-wrapp input[type="checkbox"] {
display: none;
}
.checkbox-select__check-wrapp input[type="checkbox"] + label {
position: relative;
cursor: pointer;
font-size: 1rem;
line-height: 22px;
padding-left: 30px;
display: inline-block;
transition: padding 0.25s ease;
}
.checkbox-select__check-wrapp input[type="checkbox"] + label:after {
border: solid 1px #c7c7c7;
border-radius: 3px;
content: "";
width: 18px;
height: 18px;
top: 0;
left: 0;
position: absolute;
}
.checkbox-select__check-wrapp input[type="checkbox"] + label:before {
width: 10px;
height: 10px;
content: "";
position: absolute;
top: 4px;
left: 4px;
background-color: #2cacdF;
opacity: 0;
will-change: transform;
transform: scale(0.5);
transition: all 0.2s ease;
}
.checkbox-select__check-wrapp input[type="checkbox"] + label:hover {
padding-left: 32px;
}
.checkbox-select__check-wrapp input[type="checkbox"]:checked + label:before {
opacity: 1;
transform: scale(1);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-tabs">
<li class="active"><a>Review Photos</a></li>
<li><a href="#" id="active-tab">Mass Approvals Page</a></li>
</ul>
<div id="searchFilters" class="search-container container-fluid">
<div class="col-md-12">
<label for="project-id">Project ID:</label>
<input type="text" id="project-id" name="project-id">
<label for="job-id">Job ID:</label>
<input type="text" id="job-id" name="job-id">
<label for="all-photo-questions">All Photo Questions:</label>
<input type="checkbox" id="all-photo-questions" name="all-photo-questions">
<button>Reset Filters</button>
</div>
<div class="col-md-6">
<photo-questions></photo-questions>
<associated-questions></associated-questions>
</div>
<div class="col-md-6">
</div>
</div>
<!-- Component Templates -->
<script type="text/x-template" id="photo-questions-template">
<div class="checkbox-select">
<div class="checkbox-select__trigger" :class="{ isActive: activeTrigger }" @click="showDropdown()">
<span class="checkbox-select__title">Photo Questions:</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129"><path d="M121.3 34.6c-1.6-1.6-4.2-1.6-5.8 0l-51 51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8 0-1.6 1.6-1.6 4.2 0 5.8l53.9 53.9c.8.8 1.8 1.2 2.9 1.2 1 0 2.1-.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2.1-5.8z"/></svg>
</div>
<div id="dropdown" class="checkbox-select__dropdown">
<div class="checkbox-select__col">
<div class="checkbox-select__select-all">
<label for="selectAll">{{selectAllText}}</label>
<input type="checkbox" id="selectAll" @click="selectAll" v-model="allSelected">
</div>
<div class="checkbox-select__info">
{{checkedFilters.length}} SELECTED
</div>
</div>
<ul id="customScroll" class="checkbox-select__filters-wrapp" data-simplebar-auto-hide="false">
<li v-for="(filter, index) in filteredList">
<div class="checkbox-select__check-wrapp">
<input :id="index" class="conditions-check" v-model="checkedFilters" :value="filter" type="checkbox">
<label :for="index">{{filter}}</label>
</div>
</li>
</ul>
</div>
</div>
</script>
<script type="text/x-template" id="associated-questions-template">
<div class="checkbox-select">
<div class="checkbox-select__trigger" :class="{ isActive: activeTrigger }" @click="showDropdown()">
<span class="checkbox-select__title">Associated Questions:</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129"><path d="M121.3 34.6c-1.6-1.6-4.2-1.6-5.8 0l-51 51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8 0-1.6 1.6-1.6 4.2 0 5.8l53.9 53.9c.8.8 1.8 1.2 2.9 1.2 1 0 2.1-.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2.1-5.8z"/></svg>
</div>
<div id="dropdown" class="checkbox-select__dropdown">
<div class="checkbox-select__col">
<div class="checkbox-select__select-all">
<label for="selectAll">{{selectAllText}}</label>
<input type="checkbox" id="selectAll" @click="selectAll" v-model="allSelected">
</div>
<div class="checkbox-select__info">
{{checkedFilters.length}} SELECTED
</div>
</div>
<ul id="customScroll" class="checkbox-select__filters-wrapp" data-simplebar-auto-hide="false">
<li v-for="(filter, index) in filteredList">
<div class="checkbox-select__check-wrapp">
<input :id="index" class="conditions-check" v-model="checkedFilters" :value="filter" type="checkbox">
<label :for="index">{{filter}}</label>
</div>
</li>
</ul>
</div>
</div>
</script>// Mixins
var showDropdownMixin = {
data() {
return {
activeTrigger: false,
dropdown: false
}
},
methods: {
showDropdown: function(){
if(this.dropdown == false){
this.dropdown = true;
this.activeTrigger = true;
TweenMax.fromTo(
"#dropdown",
0.55,
{
autoAlpha: 0,
y: -10
},
{
autoAlpha: 1,
y: 0,
ease: Power2.easeOut
}
);
}else{
this.dropdown = false;
this.activeTrigger = false;
TweenMax.to(
"#dropdown",
0.2,
{
autoAlpha: 0,
y: -10,
ease: Power2.easeOut
});
}
}
}
}
//Global Components
Vue.component('photo-questions', {
data() {
return {
filters: [
"Q2: Message: Vermont Village 8oz Sipping Vinegar products have had issues with…",
"Q10: This is the second photo question.",
"Q11: This is the third photo question.",
"Q12: This is the fourth photo question.",
"Q13: This is the fifth photo question.",
"Q14: This is the sixth photo question.",
"Q15: This is the seventh photo question.",
"Q16: This is the eighth photo question.",
"Q17: This is the ninth photo question.",
"Q18: This is the tenth photo question.",
"Q19: This is the eleventh photo question.",
"Q20: This is the twelfth photo question."
],
checkedFilters: ,
allSelected: true,
selectAllText: 'Select All'
};
},
template: '#photo-questions-template',
computed: {
filteredList() {
return this.filters.filter(item => {
return item.toLowerCase();
});
}
},
methods: {
selectAll: function() {
this.checkedFilters = ;
this.selectAllText = this.selectAllText == "Select All" ? 'Clear All' : 'Select All';
if (this.allSelected) {
for (filter in this.filters) {
this.checkedFilters.push(this.filters[filter].toString());
}
}
}
},
mixins: [showDropdownMixin]
})
Vue.component('associated-questions', {
data() {
return {
filters: [
"Q2: Message: Vermont Village 8oz Sipping Vinegar products have had issues with…",
"Q10: This is the second photo question.",
"Q11: This is the third photo question.",
"Q12: This is the fourth photo question.",
"Q13: This is the fifth photo question.",
"Q14: This is the sixth photo question.",
"Q15: This is the seventh photo question.",
"Q16: This is the eighth photo question.",
"Q17: This is the ninth photo question.",
"Q18: This is the tenth photo question.",
"Q19: This is the eleventh photo question.",
"Q20: This is the twelfth photo question."
],
checkedFilters: ,
allSelected: true,
selectAllText: 'Select All'
};
},
template: '#associated-questions-template',
computed: {
filteredList() {
return this.filters.filter(item => {
return item.toLowerCase();
});
}
},
methods: {
selectAll: function() {
this.checkedFilters = ;
this.selectAllText = this.selectAllText == "Select All" ? 'Clear All' : 'Select All';
if (this.allSelected) {
for (filter in this.filters) {
this.checkedFilters.push(this.filters[filter].toString());
}
}
}
},
mixins: [showDropdownMixin]
})
//Main Vue Instance
function run_app(){
const searchFilters = new Vue({
el: '#searchFilters',
data: {
title: "Vue is working"
},
});
};
window.addEventListener("load", function(event){
run_app()
});/**********************
Global Styles
***********************/
body {
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
}
*, :after, :before {
box-sizing: border-box;
}
/**********************
Tab/Container
***********************/
#active-tab {
color: #fff;
cursor: default;
background-color: #2CACDF;
border: 1px solid #2CACDF;
border-bottom-color: transparent;
}
#active-tab:hover {
color: #fff;
cursor: pointer;
background-color: #2CACDF;
border: 1px solid #2CACDF;
}
.nav-tabs li a {
font-size: 1.25rem;
font-weight: bold;
}
.search-container {
border: 1px solid #ddd;
padding : 25px 15px;
}
.search-container select {
width: 100%;
}
/**********************
Search/Filters
***********************/
.search-container input {
margin-right: 5rem;
}
.checkbox-select {
position: relative;
max-width: 800px;
width: 100%;
margin: 2rem 0;
}
.checkbox-select li {
list-style: none;
}
.checkbox-select__trigger {
border-radius: 2px;
background: #fff;
box-shadow: 3px 3px 12px 1px rgba(0, 0, 0, 0.2);
height: 40px;
display: flex;
align-items: center;
cursor: pointer;
padding: 0 25px;
transition: all 0.4s ease;
}
.checkbox-select__trigger.isActive svg {
transform: rotate(-180deg);
}
.checkbox-select__trigger svg {
width: 1rem;
transition: all 0.4s ease;
}
.checkbox-select__title {
font-size: 1.25rem;
font-weight: bold;
flex: 1;
padding-right: 1rem;
}
.checkbox-select__dropdown {
opacity: 0;
visibility: hidden;
background: #fff;
position: absolute;
left: 0;
right: 0;
box-shadow: 3px 3px 12px 1px rgba(0, 0, 0, 0.2);
border-radius: 0;
overflow: hidden;
padding-bottom: 25px;
z-index: 1000;
}
.checkbox-select__dropdown .simplebar-scrollbar {
width: 3px;
right: 1px;
}
.checkbox-select__col {
display: flex;
font-size: 1rem;
padding: 25px 25px 0px 25px;
justify-content: space-between;
text-transform: uppercase;
}
.checkbox-select__select-all label {
cursor: pointer;
}
.checkbox-select__select-all input {
display: none;
}
.checkbox-select__filters-wrapp {
margin-top: 20px;
padding-left: 2.5rem;
height: 150px;
overflow-y: auto;
}
.checkbox-select__check-wrapp {
position: relative;
padding: 0;
margin-bottom: 10px;
}
.checkbox-select__check-wrapp input[type="checkbox"] {
display: none;
}
.checkbox-select__check-wrapp input[type="checkbox"] + label {
position: relative;
cursor: pointer;
font-size: 1rem;
line-height: 22px;
padding-left: 30px;
display: inline-block;
transition: padding 0.25s ease;
}
.checkbox-select__check-wrapp input[type="checkbox"] + label:after {
border: solid 1px #c7c7c7;
border-radius: 3px;
content: "";
width: 18px;
height: 18px;
top: 0;
left: 0;
position: absolute;
}
.checkbox-select__check-wrapp input[type="checkbox"] + label:before {
width: 10px;
height: 10px;
content: "";
position: absolute;
top: 4px;
left: 4px;
background-color: #2cacdF;
opacity: 0;
will-change: transform;
transform: scale(0.5);
transition: all 0.2s ease;
}
.checkbox-select__check-wrapp input[type="checkbox"] + label:hover {
padding-left: 32px;
}
.checkbox-select__check-wrapp input[type="checkbox"]:checked + label:before {
opacity: 1;
transform: scale(1);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-tabs">
<li class="active"><a>Review Photos</a></li>
<li><a href="#" id="active-tab">Mass Approvals Page</a></li>
</ul>
<div id="searchFilters" class="search-container container-fluid">
<div class="col-md-12">
<label for="project-id">Project ID:</label>
<input type="text" id="project-id" name="project-id">
<label for="job-id">Job ID:</label>
<input type="text" id="job-id" name="job-id">
<label for="all-photo-questions">All Photo Questions:</label>
<input type="checkbox" id="all-photo-questions" name="all-photo-questions">
<button>Reset Filters</button>
</div>
<div class="col-md-6">
<photo-questions></photo-questions>
<associated-questions></associated-questions>
</div>
<div class="col-md-6">
</div>
</div>
<!-- Component Templates -->
<script type="text/x-template" id="photo-questions-template">
<div class="checkbox-select">
<div class="checkbox-select__trigger" :class="{ isActive: activeTrigger }" @click="showDropdown()">
<span class="checkbox-select__title">Photo Questions:</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129"><path d="M121.3 34.6c-1.6-1.6-4.2-1.6-5.8 0l-51 51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8 0-1.6 1.6-1.6 4.2 0 5.8l53.9 53.9c.8.8 1.8 1.2 2.9 1.2 1 0 2.1-.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2.1-5.8z"/></svg>
</div>
<div id="dropdown" class="checkbox-select__dropdown">
<div class="checkbox-select__col">
<div class="checkbox-select__select-all">
<label for="selectAll">{{selectAllText}}</label>
<input type="checkbox" id="selectAll" @click="selectAll" v-model="allSelected">
</div>
<div class="checkbox-select__info">
{{checkedFilters.length}} SELECTED
</div>
</div>
<ul id="customScroll" class="checkbox-select__filters-wrapp" data-simplebar-auto-hide="false">
<li v-for="(filter, index) in filteredList">
<div class="checkbox-select__check-wrapp">
<input :id="index" class="conditions-check" v-model="checkedFilters" :value="filter" type="checkbox">
<label :for="index">{{filter}}</label>
</div>
</li>
</ul>
</div>
</div>
</script>
<script type="text/x-template" id="associated-questions-template">
<div class="checkbox-select">
<div class="checkbox-select__trigger" :class="{ isActive: activeTrigger }" @click="showDropdown()">
<span class="checkbox-select__title">Associated Questions:</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129"><path d="M121.3 34.6c-1.6-1.6-4.2-1.6-5.8 0l-51 51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8 0-1.6 1.6-1.6 4.2 0 5.8l53.9 53.9c.8.8 1.8 1.2 2.9 1.2 1 0 2.1-.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2.1-5.8z"/></svg>
</div>
<div id="dropdown" class="checkbox-select__dropdown">
<div class="checkbox-select__col">
<div class="checkbox-select__select-all">
<label for="selectAll">{{selectAllText}}</label>
<input type="checkbox" id="selectAll" @click="selectAll" v-model="allSelected">
</div>
<div class="checkbox-select__info">
{{checkedFilters.length}} SELECTED
</div>
</div>
<ul id="customScroll" class="checkbox-select__filters-wrapp" data-simplebar-auto-hide="false">
<li v-for="(filter, index) in filteredList">
<div class="checkbox-select__check-wrapp">
<input :id="index" class="conditions-check" v-model="checkedFilters" :value="filter" type="checkbox">
<label :for="index">{{filter}}</label>
</div>
</li>
</ul>
</div>
</div>
</script>javascript vue.js vuejs2 vue-component vue-mixin
javascript vue.js vuejs2 vue-component vue-mixin
edited Nov 16 '18 at 20:06
chazsolo
5,41011234
asked Nov 16 '18 at 19:47
AndrewTheGeekAndrewTheGeek
114
edited Nov 16 '18 at 20:06
chazsolo
5,41011234
asked Nov 16 '18 at 19:47
AndrewTheGeekAndrewTheGeek
114
edited Nov 16 '18 at 20:06
chazsolo
5,41011234
edited Nov 16 '18 at 20:06
chazsolo
5,41011234
edited Nov 16 '18 at 20:06
chazsolo
5,41011234
5,41011234
asked Nov 16 '18 at 19:47
AndrewTheGeekAndrewTheGeek
114
asked Nov 16 '18 at 19:47
AndrewTheGeekAndrewTheGeek
114
asked Nov 16 '18 at 19:47
AndrewTheGeekAndrewTheGeek
114
114
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
You have two elements with the same id: dropdown. It looks like TweenMax queries the built page to find where to attach the menu, and just goes with the first one it finds.
You might make the id for each element unique, and pass the id as a parameter on your showDropdown method.
answered Nov 16 '18 at 23:50
Joe ZJoe Z
64321127
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
});
}
});
draft saved
draft discarded
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%2f53344436%2fusing-a-mixin-on-two-components-it-calls-the-method-on-only-the-first-component%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
You have two elements with the same id: dropdown. It looks like TweenMax queries the built page to find where to attach the menu, and just goes with the first one it finds.
You might make the id for each element unique, and pass the id as a parameter on your showDropdown method.
answered Nov 16 '18 at 23:50
Joe ZJoe Z
64321127
add a comment |
0
You have two elements with the same id: dropdown. It looks like TweenMax queries the built page to find where to attach the menu, and just goes with the first one it finds.
You might make the id for each element unique, and pass the id as a parameter on your showDropdown method.
answered Nov 16 '18 at 23:50
Joe ZJoe Z
64321127
add a comment |
0
0
0
You have two elements with the same id: dropdown. It looks like TweenMax queries the built page to find where to attach the menu, and just goes with the first one it finds.
You might make the id for each element unique, and pass the id as a parameter on your showDropdown method.
answered Nov 16 '18 at 23:50
Joe ZJoe Z
64321127
You have two elements with the same id: dropdown. It looks like TweenMax queries the built page to find where to attach the menu, and just goes with the first one it finds.
You might make the id for each element unique, and pass the id as a parameter on your showDropdown method.
answered Nov 16 '18 at 23:50
Joe ZJoe Z
64321127
answered Nov 16 '18 at 23:50
Joe ZJoe Z
64321127
answered Nov 16 '18 at 23:50
Joe ZJoe Z
64321127
answered Nov 16 '18 at 23:50
Joe ZJoe Z
64321127
64321127
add a comment |
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53344436%2fusing-a-mixin-on-two-components-it-calls-the-method-on-only-the-first-component%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
