Только один динамический объект данных загружается в компонент одновременно vue.js - PullRequest
Новая
       29

Только один динамический объект данных загружается в компонент одновременно vue.js

0 голосов
/ 03 июля 2018

Я изо всех сил пытался изучить Vue какое-то время, и все еще не могу разобраться с его моделью, ориентированной на данные, и особенно с синтаксисом использования этих данных. Я успешно вызвал данные из облака, но может показаться, что он выводит только один фрагмент за раз в степпер Vuetify. Если отображается количество шагов, связанного контента нет, и наоборот.

Из моего: 

<v-stepper v-model="e1">
      <v-stepper-header>
        <template v-for="n in steps">
          <v-stepper-step
            :complete="e1 > n"
            :key="`${n}-step`"
            :step="n"
          >
            Step {{ n }}
          </v-stepper-step>

          <v-divider
            v-if="n !== steps"
            :key="n"
          ></v-divider>
        </template>
      </v-stepper-header>

      <v-stepper-items>
        <v-stepper-content
          v-for="n in steps"
          :key="`${n}-content`"
          :step="n"
        >
          <v-card
            class="mb-5"
            color="grey lighten-1"
            height="200px"          
            >{{content[e1-1].city}} {{content[e1-1].name}}</v-card>


          <v-btn
            color="#5BB0FF"
            @click="nextStep(n)"
          >
            Continue
          </v-btn>

          <v-btn flat>Cancel</v-btn>
        </v-stepper-content>
      </v-stepper-items>
    </v-stepper>

Из моего <script>: 

import JQuery from 'jquery'
let $ = JQuery

export default {
  name: 'ProgressSteps',
  data () {
      return {
        e1: 1,
        steps: 3,
        content: [
      ]
      }
    },
    watch: {
      steps (val) {
        if (this.e1 > val) {
          this.e1 = val
        }
      }
    },
    methods: {
      nextStep (n) {
        if (n === this.steps) {
          this.e1 = 1
        } else {
          this.e1 = n + 1
        }
      }
    },
    mounted() {
    $.post("https://fleetr-208415.appspot.com/get-current-dropoff-locations.php")
    .done(response => {this.content = JSON.parse(response);
        this.steps = JSON.parse(response).length
    })
},
}

Вот кодекс, демонстрирующий это поведение. Если вы замените steps: 3 на steps: '', контент исчезнет, ​​даже если он отображает три шага, как и ожидалось. https://codepen.io/redheadedmandy/pen/WyWQBe?editors=1010

1 Ответ

0 голосов
/ 03 июля 2018

Я внес несколько изменений в script Надеюсь, это то, что вы ищете.

  1. Сохранено steps: 1,, поскольку необходимо инициализировать скрипт.
  2. Я жестко закодировал значение 2 в step в вашей функции mounted(), но оно работает с динамически отображаемыми данными.

https://codepen.io/anon/pen/GGLNLE?editors=1010

...