vue.js 一次只能将一个动态数据对象加载到组件中答案

【问题标题】：Only one dynamic data object loading into a component at a time vue.jsvue.js 一次只能将一个动态数据对象加载到组件中
【发布时间】：2018-12-12 02:04:40
【问题描述】：

我一直在努力学习 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

【问题讨论】：

但是为什么要用""来代替呢？
...我发誓，我在这里发布的每个问题都以我说“我是个白痴”结尾。我一开始想不设置它，因此是“”，但显然我只需要给它一些值，然后由 mount() 函数更改。
你想'最初隐藏步进器吗？还是什么？
或者你不能设置e1: 0而不是设置步骤''吗？
不，我只想从传递给它的数据中渲染步进器；我没有意识到一旦我在mounted() 函数中设置了“steps”的任何初始值，它就会被覆盖，而不仅仅是一个空值。所以steps=2 仍然呈现三个步骤，以及它们的内容。

标签： javascript jquery vue.js components dynamic-content

【解决方案1】：

我对@987654322@ 做了一些更改，希望这就是您想要的。

保留steps: 1,，因为必须初始化脚本。
我在mounted() 函数的step 中将值硬编码为2，但它正在处理动态呈现的数据。

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

【讨论】：

如果有帮助，你能接受答案并投票吗？