时间戳

首页 > 解决方案 > VueJs 相应地更新选择框

javascript - VueJs 相应地更新选择框

问题描述

我正在寻找正确的解决方案来根据每个选择选项更新多选框。

逻辑

一

根据上面的图片，我想更改选项（每次“no .push()”时列表都会更新）当select 1,3,4,5我选择选项时select 2等等。

select 1, 2, 3, 4, 5当我选择任何选择框的任何选项时，将从后端返回数据。所以总会有值替换为当前值。

问题

我当前的代码将数据推送到其他选择框但问题有时是我返回的数据（将被推送的数据）不是数组它们是对象（它应该充当单个选项）但它们返回几个空选项（下图是其中的一个样本）

二

样本返回数据

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."

例如，在我返回的数据中，segment是对象而不是数据数组，因此我需要这个对象作为我的选择框中的单个选项。

代码

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;
          }
          if (val == 'area') {
            this.zones = res.data.data.zone;
            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;
          }
          if (val == 'city') { // has issue
            this.areas = res.data.data.area;
            this.zones = res.data.data.area.zone;
            this.links = res.data.data.links;
            this.closures = res.data.data.links.closures;
            this.segments = res.data.data.segments;
          }
          if (val == 'segment') { // has issue
            this.areas = res.data.data.hthree;
            this.zones = res.data.data.hthree.area.zone;
            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]
            }
          }
          if (val == 'link') { //has issue
            this.closures = res.data.data.closures;
            this.segments = res.data.data.segment;
            this.regions = res.data.data.segment.hthree;
            this.areas = res.data.data.segment.area;
            this.zones = res.data.data.segment.area.zone;
          }
          if (val == 'closure') {
            this.regions = res.data.data.link.segment.hthree;
            this.segments = res.data.data.link.segment;
            this.zones = res.data.data.link.segment.hthree.area.zone;
            this.areas = res.data.data.link.segment.hthree.area;
            this.links = res.data.data.link;
          }
        })
        .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">
        <el-col :span="24">
          <el-form-item label="Zone">
            <el-select align="right" @change="zoneChange('zone', $event)" v-model="option.zone" placeholder="Pilih Zone Region">
              <el-option v-for="zone in zones" :key="zone.id" :label="zone.name" :value="zone.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="Area">
            <el-select @change="zoneChange('area', $event)" placeholder="Pilih Area" v-model="option.area">
              <el-option v-for="area in areas" :key="area.id" :label="area.name" :value="area.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="Region">
            <el-select @change="zoneChange('city', $event)" placeholder="Pilih Kota" v-model="option.city">
              <el-option v-for="region in regions" :key="region.id" :label="region.name" :value="region.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="Segment">
            <el-select @change="zoneChange('segment', $event)" placeholder="Pilih Segment" v-model="option.segment">
              <el-option v-for="segment in segments" :key="segment.id" :label="segment.name" :value="segment.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="Link">
            <el-select @change="zoneChange('link', $event)" placeholder="Pilih Link" v-model="option.link">
              <el-option v-for="link in links" :key="link.id" :label="link.site_name" :value="link.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="Closure">
            <el-select @change="zoneChange('closure', $event)" placeholder="Pilih Closure" v-model="option.closure">
              <el-option v-for="closure in closures" :key="closure.id" :label="closure.name" :value="closure.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="18" :offset="3">
          <el-button type="primary" icon="el-icon-search" round>Search</el-button>
        </el-col>
      </el-form>
    </el-card>
  </el-row>
</div>

在zoneChange(val, e) {..}函数中，我试图根据所选选项重写所有选择框的默认值。正如我在问题部分中解释的那样，它有时会返回额外的空选项。

问题

让我的逻辑发生的最佳方法是什么？使用watch method还是我目前的方法很好只需要修复？

请与我分享您的解决方案。

标签： javascriptvue.jsvuejs2

解决方案

解决了

为了避免额外的选项，我使用此代码将对象数据转换为数组

const newObj = [ res.data.data.link.segment]
this.segments = newObj;

希望它可以帮助别人。

推荐阅读