Почему я не могу использовать переменную для цикла в VueJS?

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>

Тогда я получаю ВЫХОД как,

 1
 2

Но я передаю одно и то же значение на оба, vuejs принимает только прямое назначение.

Что не так с моим кодом?

Как это возможно или какие-либо другие решения?

javascript html laravel vue.js vuejs2

0

Shankar Thiyagaraajan 12 Дек 2016 в 08:15

Answer 1

Наконец я узнаю свою ошибку.

Здесь цикл не может найти тип данных.

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

Кому

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

Теперь его работы очаровывают.

Вопрос заключается в том, чтобы указать тип данных.

Спасибо @saurabh.

Спасибо вам всем !

1

Shankar Thiyagaraajan 3 Янв 2017 в 05:07

Answer 2

Кажется, с вашим кодом есть две проблемы.

Первое: вы должны включить ваш 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>

Второе: вы должны передать реквизиты: { {X0}} где вы визуализируете компонент seg, это должно быть примерно так:

<seg tn_b=2></seg>

0

Saurabh 12 Дек 2016 в 06:24

Answer 3

Попробуйте указать свои реквизиты 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>

1

Kornelius Kristian Rayani 3 Янв 2017 в 03:39

Почему я не могу использовать переменную для цикла в VueJS?

3 ответа

Похожие вопросы

Новые вопросы

javascript