0

Я новичок в программировании.

Есть задача сгенерировать данные для такого дизайна:

введите сюда описание изображения

Я оформил черновик(так сказать) следующим образом:

 <div class="form_box" v-for="(i, index, item) in quantity_form_box" :key="item">

  <h3 class="h3_2" v-for="i in 1">
    {{}}
  </h3>

  <div class="select_box">

    <span class="label">
                lklk
              </span>

    <div class="select_1">
      dfgkj

      <i class="select_button"></i>

    </div>

  </div>
  <!--   <div class="select_box">  end  -->

  <a href="#" class="a_button_1">
              dsfsdfgd;fg
            </a>

</div>
<!--   <div class="form_box">   end   -->

<script>
  export default {

    data: function() {
      return {

        quantity_form_box: [{
          form_box: [{
            h3: 'sdfgsdf',

            select_box: [{
              select_box_label: [{
                  select_box_label_text: 'Von'
                },
                {
                  select_box_label_text: 'Nach'
                },
              ],
              select_text: [{
                  select_default_text: 'Bitte PLZ angeben'
                },
                {
                  select_default_text: 'Bitte PLZ angeben'
                },
              ],
            }, ],

            a_button: [{
              a_button_curent: [{
                a_button_text: 'ANFRAGE STARTEN',
                a_button_class: 'a_button_1',
                a_button_link: '#',
              }, ],
              a_button_curent: [{
                a_button_text: 'BEWERBUNG STRATEN',
                a_button_class: 'a_button_2',
                a_button_link: '#',
              }, ],
            }],
          }],
        }, ],
      }
    }
  }
</script>

Вопросы:

  1. Не удается вытащить данные например даже из H3 ключа во вложенном массиве. Каков синтаксис данного запроса?

  2. Код (js) мне интуитивно кажется очень громоздким и сложным. Слишком много уровней вложенности.

Буду благодарен за советы относительно того, как примерно надо его оформлять в таких ситуациях.. Ссылки на правильные примеры и пр.

5
  • 1
    Код лучше вставить текстом, а не картинкой, так как никто не захочет его разбирать в таком виде. Commented 13 июн. 2018 в 5:33
  • Мне в принципе главное концепцию понять. Например как вытащить данные из массива в котором ключь со значением. (на моем примере или нет это не важно даже.) Commented 13 июн. 2018 в 6:26
  • А какие методы вы применяли что б вытащить ключи?
    – nick_n_a
    Commented 13 июн. 2018 в 6:28
  • 1
    for (var i in obj) console.log(i+"="+obj[i]); а это работает?
    – nick_n_a
    Commented 13 июн. 2018 в 6:29
  • Просмотрите w3schools.com раздел javascript.
    – nick_n_a
    Commented 13 июн. 2018 в 6:32

1 ответ 1

1

Ваша проблема не совсем в синтаксисе запроса, а в том, что вы непонятным образом сформировали данные. Вот один из примеров как это можно сделать более правильно.

new Vue({
  el: '#app',
  data() {
    return {
      form_box: {
        h3: 'Your h3 header',

        select_box: [
          {
            label_text: 'Von',
            default_text: 'Bitte PLZ angeben'
          },
          {
            label_text: 'Nach',
            default_text: 'Bitte PLZ angeben'
          }
        ], 

        a_button_current: [
          {
            a_button_text: 'ANFRAGE STARTEN',
            a_button_class: 'a_button_1',
            a_button_link: '#',
          }
        ]
      }
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>

<div id="app">
  <div class="form_box">
    <h3 class="h3_2">
      {{ form_box.h3 }}
    </h3>

    <div class="select_box" v-for="select in form_box.select_box">
      <span class="label">{{ select.label_text }}</span>

      <div class="select_1">
        {{ select.default_text }}
        <i class="select_button"></i>
      </div>
    </div>

    <a v-for="link in form_box.a_button_current" :href="link.a_button_link" :class="link.a_button_class">{{ link.a_button_text }}</a>
  </div>
</div>

4
  • Я планировал иметь в перспективе несколько елементов '.form_box' И хотелось создать какую то упорядоченность данных(по которым бы пришлось итерацией проходить.) Не знаю - правильный ли это подход был бы для такой цели? Commented 13 июн. 2018 в 15:44
  • Такой вопрос: Могу ли я опираться вообще на порядок массива или же я как то дополнительно еще упорядочивать должен елементы(и не верить в то что массив сам по себе всегда будет упорядоченным.) Например вот такой массив: joxi.ru/1A5Ld7xHnKqaV2 Commented 13 июн. 2018 в 21:26
  • 1
    Массив всегда имеет тот порядок, в котором вы определили его элементы. Иметь несколько элементов .form_box — окей, просто имейте в виду изначально, что вы при помощью Vue будете итерировать его вложенными циклами v-for. Это значит, что в каждом элементе массива, который описывает элементы формы, должны быть только те данные, которые относятся к этой конкретной форме. Commented 14 июн. 2018 в 8:22

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.