説明が難しいのでモックを作りました
参考URL: https://jsfiddle.net/orangelion/L5xs401d/8/
(
// https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js
// https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.min.js
Vue.component('test-select-children', {
template: '#test-select-children-template',
data: function() {
return {
filterCombinations: [{
hogeId: 2,
fooId: 3
}],
test1s: [{
id: 1,
name: 'a'
}, {
id: 2,
name: 'b'
}],
test2s: [{
id: 3,
name: 'c'
}, {
id: 4,
name: 'd'
}],
originTest1s: [{
id: 1,
name: 'a'
}, {
id: 2,
name: 'b'
}],
originTest2s: [{
id: 3,
name: 'c'
}, {
id: 4,
name: 'd'
}],
cloneElement: `
<div class='js-selectes'>
<label>要素1</label>
<select class='hoge' v-on:change='changeHoge($event)'>
<option v-for='test1 in test1s' v-bind:value='test1.id'>
{{ test1.name }}
</option>
</select>
<label>要素2</label>
<select class='foo' v-on:change='changeFoo($event)'>
<option v-for='test2 in test2s' v-bind:value='test2.id'>
{{ test 2.name }}
</option>
</select>
</div>
`
}
},
methods: {
changeHoge: function(e) {
const filterIds = this.filterIds('hoge', $(e.currentTarget));
console.log(filterIds)
this.test2s = this.test2s.filter(function(v) {
return !filterIds.includes(v.id)
});
if (filterIds.length < 1) this.test2s = this.originTest2s;
},
changeFoo: function(e) {
const filterIds = this.filterIds('foo', $(e.currentTarget));
this.test1s = this.test1s.filter(function(v) {
return !filterIds.includes(v.id)
});
if (filterIds.length < 1) this.test1s = this.originTest1s;
},
filterIds: function(type, $target) {
const val = parseInt($target.find('option:selected').val());
const otherType = type === 'hoge' ? 'foo' : 'hoge';
return this.filterCombinations.filter(function(v) {
return v[`${type}Id`] === val;
})
.map(function(v) {
return v[`${otherType}Id`]
});
},
addForm: function() {
$('.js-selectes:last').after(this.cloneElement);
this.$compile($('.js-selectes:last')[0]);
},
}
});
new Vue({
el: 'body'
});
select {
width: 100px;
}
btn {
width: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script id='test-select-children-template' type='text/x-template'>
<div class='js-selectes'>
<label>要素1</label>
<select class='hoge' v-on:change='changeHoge($event)'>
<option v-for='test1 in test1s' v-bind:value='test1.id'>
{{ test1.name }}
</option>
</select>
<label>要素2</label>
<select class='foo' v-on:change='changeFoo($event)'>
<option v-for='test2 in test2s' v-bind:value='test2.id'>
{{ test2.name }}
</option>
</select>
</div>
<button v-on:click='addForm()'>追加</button>
</script>
<test-select-children></test-select-children>
(ひよコードで申し訳ないですが)
質問内容はこういう機能を作ろうとした時の良い実装方法が知りたいです(Vue.js wayに乗っとった方法)