I am in search of the perfect solution to dynamically update a multi-select box based on each selected option.
Logical Approach
https://i.sstatic.net/Nm2fv.png
In reference to the image above, I aim to modify the options (refreshing the list each time without using ".push()") of select 1,3,4,5 when an option is selected in select 2 and so forth.
The data for
select 1, 2, 3, 4, 5will be retrieved from the backend whenever an option in any select box is chosen. Therefore, there will always be new values to replace the existing ones.
Current Issue
My current code successfully populates other select boxes with data, but sometimes the returned data are not arrays; instead, they are objects that should act as single options, leading to multiple empty selections (as shown in the sample image below).
https://i.sstatic.net/kSPPx.png
Sample Example of Returned Data
data: {id: 54, option_id: 1, cable_id: 1, name: "etsahetahe", description: "sthsthrt", position: "Kabel Udara",…}
id: 54
name: "etsahetahe"
description: "sthsthrt"
option_id: 1
created_at: "2020-04-27T08:05:06.000000Z"
updated_at: "2020-04-27T08:05:06.000000Z"
option: {id: 1, segment_id: 2, cable_id: 2, type: "Backbone", site_name: "12585444-54741115",…}
id: 1
type: "Backbone"
segment_id: 2
site_name: "12585444-54741115"
created_at: "2020-04-14T03:51:47.000000Z"
updated_at: "2020-04-15T08:03:32.000000Z"
segment: {id: 2, hthree_id: 1, name: "Segment 2", created_at: "2020-04-14T03:36:50.000000Z",…}
hthree: {id: 1, area_id: 1, name: "h3i 1", created_at: "2020-04-14T03:36:23.000000Z",…}
hthree_id: 1
id: 2
name: "Segment 2"
created_at: "2020-04-14T03:36:50.000000Z"
updated_at: "2020-04-14T03:36:50.000000Z"
message: "Data retrieved successfully."
For example, in the returned data provided, the
segmentis an object and not an array of data. Hence, this object needs to be treated as a single option in my select box.
Code Implementation
https://jsfiddle.net/robertnicjoo/xc5f2btL/2/
new Vue({
el: "#app",
data() {
return {
option:{
zone:'',
area:'',
city:'',
segment:'',
link:'',
closure:'',
},
zones: [],
links: [],
areas: [],
regions: [],
segments: [],
closures: [],
}
},
mounted() {
this.getData();
},
methods: {
getData() {
this.axios.get("/api/maps")
.then((res) => {
this.zones = res.data.data;
this.links = res.data.links;
this.areas = res.data.areas;
this.regions = res.data.regions;
this.segments = res.data.segments;
this.closures = res.data.closures;
})
},
zoneChange(val, e) {
axios.post('/api/admin/maps/valChanger', {
[val]: e
})
.then(res => {
if (val == 'zone') {
this.areas = res.data.data.areas;
this.segments = res.data.data.segments;
this.links = res.data.data.links;
let links = res.data.data.links;
for (let i = 0; i < links.length; i++) {
this.closures = [...links[i].closures]
}
this.regions = res.data.data.cities;
}
// Other conditions for different select boxes can be added here
})
.catch(error => {
var errors = error.response.data;
let errorsHtml = '<ol>';
$.each(errors.errors, function(k, v) {
errorsHtml += '<li>' + v + '</li>';
});
errorsHtml += '</ol>';
this.$notify.error({
title: 'Filter Error',
dangerouslyUseHTMLString: true,
message: errorsHtml
});
});
},
}
})body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
li {
margin: 8px 0;
}
h2 {
font-weight: bold;
margin-bottom: 15px;
}
del {
color: rgba(0, 0, 0, 0.3);
}
.el-select {
float: right;
}<link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<div id="app">
<el-row :gutter="10">
<el-card shadow="always">
<el-form ref="option" :model="option" label-width="120">
<!-- Form elements generating dynamic select boxes based on data -->
</el-form>
</el-card>
</el-row>
</div>In the
zoneChange(val, e) {..}function, I endeavor to reset the default values of all select boxes based on the selected option. However, as mentioned in the issue section, it sometimes results in additional empty options being displayed.
Query
What would be the most effective approach for me to achieve my desired logic? Should I consider utilizing the watch method, or is there a better alternative within my existing method that just requires modification?
Your valuable insights and solutions are highly appreciated.