为什么我不能在 VueJS 中的 for 循环中使用变量？

Question

我使用 VueJS（在 Laravel 中）使用变量值执行简单循环。

此处，值来自模板道具。

HTML:

 <template id="segment" t_nb=2></template>


 <div id="test_loop">
  <b>@{{ t_nb }}</b>
  <div v-for="a in t_nb">
    <seg>@{{ a }}</seg>
  </div>
 </div>

VueJS:

Vue.component(
 'seg', {
    template: '#segment',
    props: ['t_nb']
      }
   );

输出：

 <!-- (Empty)-->

到这里，我循环了2次就不行了

如果我以直接方式将“t_nb”的值作为 2 传递，例如

 <div v-for="a in 2">
    <seg>@{{ a }}</seg>
  </div>

然后，我得到 OUTPUT 作为，

 1
 2

但是我在两者上都传递了相同的值，vuejs 只接受直接赋值。

我的代码有什么问题？

这怎么可能或任何其他解决方案？

Answer 1

您的代码似乎有两处错误。

第一件事：您必须在模板中包含您 HTML，如下所示。当您的组件 seg 使用模板 '#segment' 时，它必须包含所有相关的 HTML.

<template id="segment">

   <div id="test_loop">
    <b>@{{ t_nb }}</b>
    <div v-for="a in t_nb">
      <seg>@{{ a }}</seg>
    </div>
   </div>
</template>

第二件事：你必须传递 props: t_nb=2 你渲染 seg 组件的地方，它应该像下面这样：

<seg tn_b=2></seg>

Answer 2

尝试将您的 t_nb props 指定为数组，例如：

props: { 't_nb': { type: Array, default: [1, 2], // Value that you want to loop } }

然后，如果你想为 t_nb 属性分配一个新值，请执行：

<seg :t_nb="[3,4,5,6]"></seg>

Answer 3

终于发现自己的错误了

在这里，循环找不到它的数据类型。

  <div v-for="a in t_nb">
    <seg>@{{ a }}</seg>
  </div>

至

  <div v-for="a in parseInt(t_nb)">
    <seg>@{{ a }}</seg>
  </div>

现在它的作品魅力。

问题是指定数据类型。

感谢@saurabh。

谢谢大家！

为什么我不能在 VueJS 中的 for 循环中使用变量？

Why i can't use variable on for loop in VueJS?

html

javascript

laravel

vue.js

vuejs2