2016-02-01 2 views
0

hy tout ce que je vue.js en utilisant & Laravel 4
mon quetion est de savoir comment je peux importer modèle dans vue.js et j'ai essayer comme ça, mais le travail ne marche pas
comment importer modèle dans 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'); 
 
})

grâce

+0

Si vous remplacez le te mplate: nécessite avec du html, ça marche alors? – Adam

+0

hy, pouvez-vous me donner un exemple pour cette – b4dQuetions

Répondre

0

Toute personne venant par ce poste: I rece ntly avait quelque chose de similaire mais avec Laravel 5.1.

1) définir un composant (par exemple. Grid.vue peut être ressources/actifs/js/composants/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) Dans ressource /assets/js/yourcustomvue.js

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