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

Posted 2023-02-23

【中文标题】vue.js 一次只能将一个动态数据对象加载到组件中

【英文标题】：Only one dynamic data object loading into a component at a time vue.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"
                      
            >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 仍然呈现三个步骤，以及它们的内容。

【参考方案1】：

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

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

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

【讨论】：

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