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

尝试将 t_nb道具指定为数组，例如：

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 2

最后我发现了我的错误。

这里，循环无法找到它的数据类型。

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

到

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

现在它的作品很有魅力。

问题是指定数据类型。

感谢@saurabh。

谢谢大家！

Answer 3

您的代码似乎有两个问题。

首先：您必须在模板中包含HTML，如下所示。当您的组件'#segment'正在使用模板<template id="segment"> <div id="test_loop"> <b>@{{ t_nb }}</b> <div v-for="a in t_nb"> <seg>@{{ a }}</seg> </div> </div> </template>时，它必须包含所有相关的HTML。

t_nb=2

第二件事：你必须通过props：seg来渲染<seg tn_b=2></seg>组件，它应该如下：

cli::array<String^> ^arr = gcnew cli::array<String^>{};

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

3 个答案: