2016-02-01 3 views
0

HY все, что я с помощью vue.js & Laravel 4
мой quetion как я могу импортировать шаблон в vue.js и я стараюсь, как это, но не работает
как импортировать шаблон в vueJs

// define some components 
 
//var Foo = Vue.extend({ 
 
// template: '<p>This is foo!</p>' 
 
//}) 
 

 
//I have change like this 
 
var Foo = Vue.extend({ 
 
    template: require('url/mylayout.html'); 
 
})

благодаря

+0

Если вы замените te mplate: требуется с некоторым html, он работает тогда? – Adam

+0

Не могли бы вы привести пример для этого – b4dQuetions

ответ

0

Любой проходящий через этот пост: I Rece ntly имел что-то подобное, но с Laravel 5.1.

1) определить компонент (например. Grid.vue может быть ресурсов/активы/JS/компоненты/Grid.vue)

<template id="grid"> 
<table class="table"> 
    <thead> 
    <tr> 
     <th v-for="key in columns" 
      @click="sortBy(key)" 
      :class="{active: sortKey == key}"> 
      {{key | capitalize}} 
     <span class="arrow" 
      :class="sortOrders[key] > 0 ? 'asc' : 'dsc'"> 
     </span> 
     </th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr v-for=" 
    entry in data 
    | filterBy filterKey 
    | orderBy rank sortOrders[rank]"> 
     <td v-for="key in columns"> 
      {{entry[key]}} 
     </td> 
    </tr> 
    </tbody> 
</table> 

<script> 
    // register the grid component 
    export default { 
     template: '#grid', 
     props: { 
      data: Array, 
      columns: Array, 
      filterKey: String 
     }, 
     data: function() { 
      var sortOrders = {}; 
      this.columns.forEach(function (key) { 
       sortOrders[key] = 1 
      }); 
      return { 
       sortKey: '', 
       sortOrders: sortOrders 
      } 
     }, 
     methods: { 
      sortBy: function (key) { 
       this.sortKey = key; 
       this.sortOrders[key] = this.sortOrders[key] * -1 
      } 
     } 
    }; 
</script> 

2) В ресурсе /assets/js/yourcustomvue.js

import Grid from './components/Grid.vue'; 
new Vue({ 
el: '#results', 
components: {Grid}, 
data: {} 
});