VueJs обновление окон выбора соответственно - PullRequest
Новая
       0

VueJs обновление окон выбора соответственно

0 голосов
/ 05 мая 2020

Я ищу правильное решение для обновления окна множественного выбора на основе каждого варианта выбора.

Logi c

one

На основе изображения выше я хочу изменить параметры (список получает fre sh каждый раз "no .pu sh ()") из select 1,3,4,5, когда я выбираю параметр в select 2 и так on.

Данные select 1, 2, 3, 4, 5 будут возвращены из серверной части, когда я выберу любую опцию в любом поле выбора. поэтому всегда будут значения, которые нужно заменить текущими.

Проблема

Мой текущий код отправляет данные в другие поля выбора, но иногда проблема заключается в моих возвращаемых данных (данные, которые будут нажатые) не являются массивом, они являются объектом (предполагается, что он действует как один параметр), но они возвращаются с несколькими пустыми параметрами (изображение ниже является примером этого)

two

Образец возвращенных данных 

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) {..} я пытаюсь переписать значения по умолчанию для всех полей выбора на основе выбранной опции. Как я объяснял в части проблемы, он иногда возвращается с дополнительными пустыми параметрами.

Вопрос

Как лучше всего сделать мой logi c возможным? используя watch method, или мой текущий метод хорош, просто нужно его исправить?

Пожалуйста, поделитесь со мной своими решениями.

1 Ответ

0 голосов
/ 05 мая 2020

Решено

Чтобы избежать лишних опций, я превратил данные своего объекта в массив с помощью этого кода 

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

Надеюсь, это поможет другим.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...