説明が難しいのでモックを作りました
参考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に乗っとった方法)
主な機能
- 「要素1」と「要素2」はそれぞれセットである
- 「要素1」の何かを選択した場合にfilterCombinations(に値がある場合)の「要素2」のIDを見て、「要素2」のselect boxからoptionを削る(その逆もしかり)
- 「追加」ボタンを押すと「要素1」と「要素2」が増える
問題
「要素1」と「要素2」を増やした時に見ているデータ(test1sとtest2s)が同じもののため、全ての「要素1」と「要素2」が反応してしまい、独立していない
(「追加」ボタンを押した状態で「要素1」を「b」に選択すると「要素2」が「d」に全て変わってしまう)
なので、これに対する良い実装方法を知りたいです
(そもそも実装方法が悪い、など)
読んでいただき、ありがとうございました。