Vue.js - Компонент с двумя рядами.

Question

Я начинаю с Vue.js, и я хотел бы использовать компонент. У меня есть (динамическая) таблица с машинами (SN = серийный номер) и их деньги для каждого источника, поэтому я хочу использовать rowspan. Каждая строка будет экземпляром компонента, потому что имеет собственный флажок, и я хотел бы работать с ним позже. Проблема в том, что я не знаю, как использовать цикл с созданием компонента, который немного сложнее внутри таблицы. Вот пример:

<div id="container"> 
    <table border="1"> 
     <template v-for="row in storage.rows"> 
      <tr> 
       <td rowspan="2"><input type="checkbox"></td> 
       <td rowspan="2">{{row.sn}}</td> 
       <td>{{row.source}}</td> 
      </tr> 
      <tr> 
       <td>{{row.pair.source}}</td> 
      </tr> 
     </template> 
    </table> 
</div> 

<script> 
    new Vue({ 
     el: '#container', 

     data: { 
      storage: { 
       rows: [ 
        {sn: 111, source: 'EK', pair: {source: 'VLT', in: 100}}, 
        {sn: 222, source: 'EK', pair: {source: 'VLT', in: 200}} 
       ] 
      } 
     }, 


    }); 
</script> 

Это прекрасно работает, но я не знаю, как преобразовать шаблон в компонент. С Vue.js Я использую Laravel и его лезвие двигателя шаблон поэтому у меня есть обходной путь, как это:

<div id="container"> 
    <table border="1"> 
     @foreach($differences as $difference) 
      <tr is="ek" diff="{{ json_encode($difference) }}"></tr> 
      <tr is="vlt" diff="{{ json_encode($difference->pair) }}"></tr> 
     @endforeach 
    </table> 
</div> 

<template id="ek-template"> 
    <tr> 
     <td rowspan="2"><input type="checkbox"></td> 
     <td rowspan="2">@{{ difference.sn }}</td> 
     <td>@{{ difference.source }}</td> 
    </tr> 
</template> 

<template id="source-template"> 
    <tr> 
     <td>@{{ difference.source }}</td> 
    </tr> 
</template> 

<script> 
    new Vue({ 
     el: '#container', 

     data: { 
      storage: { 
       differences: {!! json_encode($differences) !!} 
      } 
     }, 

     components: { 
      ek: { 
       template: '#ek-template', 
       props: ['diff'], 

       computed: { 
        difference: function() { 
         return JSON.parse(this.diff); 
        }, 
       }, 
      }, 

      vlt: { 
       template: '#source-template', 
       props: ['diff'], 
       computed: { 
        difference: function() { 
         return JSON.parse(this.diff); 
        }, 
       }, 
      } 
     }, 
    }); 
</script> 

И я хочу, чтобы использовать петлю Vue.js вместо Laravel-х foreach, потому что у меня есть уже данные в объекте Vue.js , Есть ли решение, как это сделать?

Answer 1

Вам не нужно смешивать лезвия и шаблоны vue js.

Ваш пример верный, вам просто нужно преобразовать, чтобы стать компонентом VueJs для одного файлового компонента. (Файлы * .vue) структура Компонент вю является

// template should only have one root (e.g. wrap in div) 
<template> 
    <div id="container"> 
     <table border="1"> 
      <template v-for="row in storage.rows"> 
       <tr> 
        <td rowspan="2"><input type="checkbox"></td> 
        <td rowspan="2">{{row.sn}}</td> 
        <td>{{row.source}}</td> 
       </tr> 
       <tr> 
        <td>{{row.pair.source}}</td> 
       </tr> 
      </template> 
     </table> 
    </div> 
</template> 


<script> 
export default { 
    // a data has to be a function within a vue component 
    data() { 
     return { 
      storage: { 
       rows: [ 
        {sn: 111, source: 'EK', pair: {source: 'VLT', in: 100}}, 
        {sn: 222, source: 'EK', pair: {source: 'VLT', in: 200}} 
       ] 
      } 
     } 
    } 
} 
</script> 

// styling for a template 
<style> 
</style> 

Новый проект Laravel 5,3 есть компонент образца вю предустановлена. Вы можете использовать это как ссылку и использовать gulp для компиляции всех ваших компонентов vue (* .vue) в один файл (например, app.js)