Skip to main content
removeu 1 caractere do conteúdo
Fonte Link
Bruno Rigolon
  • 3,3mil
  • 11
  • 17

Estou tentando utilizar o VueTable-2 enviando as informações via a props data. Procurei em diversos sites, testei e nada funcionou, inclusive achei este exemplo no formato que preciso, mas também não funciona. O código mais básico, seria o código abaixo, alguém por acaso sabe o porquê disto não funcionar? Ou a maneira correta.

Coloquei para exibir na tela o objeto de teste que a tabela deveria renderizar.

Obs.: Com o tipo de api-mode igual a true funciona perfeitamente, o que preciso, é que funcione com api-mode igual a false.

Vue.use(Vuetable);
new Vue({
  el: '#app',
  data: {
    tableColumns: ['id', 'name'],
    itens: [
        { id: 1, name: "Jogos Vorazes" },
        { id: 2, name: "Todo mundo em Pânico" }
    ],
  }
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="app" class="container">

  <h1 class="text-center">Vuejs com VueTable-2</h1>

  <hr>

  <vuetable ref="vuetable"
       :api-mode="false"
       :fields="tableColumns"
       :data="itens">
  </vuetable>
  <pre>{{ itens }}</pre>
</div>


**Editado:**

O projeto VueTable-2 na versão 1.6.3 foi marcado como contendo um bug. O link da abertura no Git do issue. Aguardando a correção para fechar o tópico.


** Editado**Editado (corrigido) **:**

O bug foi corrigido na versão v1.6.5.
Observação, para quem utilizar a versão 1.6.3 estará com este bug

Estou tentando utilizar o VueTable-2 enviando as informações via a props data. Procurei em diversos sites, testei e nada funcionou, inclusive achei este exemplo no formato que preciso, mas também não funciona. O código mais básico, seria o código abaixo, alguém por acaso sabe o porquê disto não funcionar? Ou a maneira correta.

Coloquei para exibir na tela o objeto de teste que a tabela deveria renderizar.

Obs.: Com o tipo de api-mode igual a true funciona perfeitamente, o que preciso, é que funcione com api-mode igual a false.

Vue.use(Vuetable);
new Vue({
  el: '#app',
  data: {
    tableColumns: ['id', 'name'],
    itens: [
        { id: 1, name: "Jogos Vorazes" },
        { id: 2, name: "Todo mundo em Pânico" }
    ],
  }
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="app" class="container">

  <h1 class="text-center">Vuejs com VueTable-2</h1>

  <hr>

  <vuetable ref="vuetable"
       :api-mode="false"
       :fields="tableColumns"
       :data="itens">
  </vuetable>
  <pre>{{ itens }}</pre>
</div>


**Editado:**

O projeto VueTable-2 na versão 1.6.3 foi marcado como contendo um bug. O link da abertura no Git do issue. Aguardando a correção para fechar o tópico.


** Editado (corrigido) **

O bug foi corrigido na versão v1.6.5.
Observação, para quem utilizar a versão 1.6.3 estará com este bug

Estou tentando utilizar o VueTable-2 enviando as informações via a props data. Procurei em diversos sites, testei e nada funcionou, inclusive achei este exemplo no formato que preciso, mas também não funciona. O código mais básico, seria o código abaixo, alguém por acaso sabe o porquê disto não funcionar? Ou a maneira correta.

Coloquei para exibir na tela o objeto de teste que a tabela deveria renderizar.

Obs.: Com o tipo de api-mode igual a true funciona perfeitamente, o que preciso, é que funcione com api-mode igual a false.

Vue.use(Vuetable);
new Vue({
  el: '#app',
  data: {
    tableColumns: ['id', 'name'],
    itens: [
        { id: 1, name: "Jogos Vorazes" },
        { id: 2, name: "Todo mundo em Pânico" }
    ],
  }
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="app" class="container">

  <h1 class="text-center">Vuejs com VueTable-2</h1>

  <hr>

  <vuetable ref="vuetable"
       :api-mode="false"
       :fields="tableColumns"
       :data="itens">
  </vuetable>
  <pre>{{ itens }}</pre>
</div>


**Editado:**

O projeto VueTable-2 na versão 1.6.3 foi marcado como contendo um bug. O link da abertura no Git do issue. Aguardando a correção para fechar o tópico.


**Editado (corrigido):**

O bug foi corrigido na versão v1.6.5.
Observação, para quem utilizar a versão 1.6.3 estará com este bug

adicionou 148 caracteres ao conteúdo
Fonte Link
Bruno Rigolon
  • 3,3mil
  • 11
  • 17

Estou tentando utilizar o VueTable-2 enviando as informações via a props data. Procurei em diversos sites, testei e nada funcionou, inclusive achei este exemplo no formato que preciso, mas também não funciona. O código mais básico, seria o código abaixo, alguém por acaso sabe o porquê disto não funcionar? Ou a maneira correta.

Coloquei para exibir na tela o objeto de teste que a tabela deveria renderizar.

Obs.: Com o tipo de api-mode igual a true funciona perfeitamente, o que preciso, é que funcione com api-mode igual a false.

Vue.use(Vuetable);
new Vue({
  el: '#app',
  data: {
    tableColumns: ['id', 'name'],
    itens: [
        { id: 1, name: "Jogos Vorazes" },
        { id: 2, name: "Todo mundo em Pânico" }
    ],
  }
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="app" class="container">

  <h1 class="text-center">Vuejs com VueTable-2</h1>

  <hr>

  <vuetable ref="vuetable"
       :api-mode="false"
       :fields="tableColumns"
       :data="itens">
  </vuetable>
  <pre>{{ itens }}</pre>
</div>


**Editado:**

O projeto VueTable-2 na versão 1.6.3 foi marcado como contendo um bug. O link da abertura no Git do issue. Aguardando a correção para fechar o tópico.


** Editado (corrigido) **

O bug foi corrigido na versão v1.6.5.
Observação, para quem utilizar a versão 1.6.3 estará com este bug

Estou tentando utilizar o VueTable-2 enviando as informações via a props data. Procurei em diversos sites, testei e nada funcionou, inclusive achei este exemplo no formato que preciso, mas também não funciona. O código mais básico, seria o código abaixo, alguém por acaso sabe o porquê disto não funcionar? Ou a maneira correta.

Coloquei para exibir na tela o objeto de teste que a tabela deveria renderizar.

Obs.: Com o tipo de api-mode igual a true funciona perfeitamente, o que preciso, é que funcione com api-mode igual a false.

Vue.use(Vuetable);
new Vue({
  el: '#app',
  data: {
    tableColumns: ['id', 'name'],
    itens: [
        { id: 1, name: "Jogos Vorazes" },
        { id: 2, name: "Todo mundo em Pânico" }
    ],
  }
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="app" class="container">

  <h1 class="text-center">Vuejs com VueTable-2</h1>

  <hr>

  <vuetable ref="vuetable"
       :api-mode="false"
       :fields="tableColumns"
       :data="itens">
  </vuetable>
  <pre>{{ itens }}</pre>
</div>


**Editado:**

O projeto VueTable-2 na versão 1.6.3 foi marcado como contendo um bug. O link da abertura no Git do issue. Aguardando a correção para fechar o tópico.

Estou tentando utilizar o VueTable-2 enviando as informações via a props data. Procurei em diversos sites, testei e nada funcionou, inclusive achei este exemplo no formato que preciso, mas também não funciona. O código mais básico, seria o código abaixo, alguém por acaso sabe o porquê disto não funcionar? Ou a maneira correta.

Coloquei para exibir na tela o objeto de teste que a tabela deveria renderizar.

Obs.: Com o tipo de api-mode igual a true funciona perfeitamente, o que preciso, é que funcione com api-mode igual a false.

Vue.use(Vuetable);
new Vue({
  el: '#app',
  data: {
    tableColumns: ['id', 'name'],
    itens: [
        { id: 1, name: "Jogos Vorazes" },
        { id: 2, name: "Todo mundo em Pânico" }
    ],
  }
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="app" class="container">

  <h1 class="text-center">Vuejs com VueTable-2</h1>

  <hr>

  <vuetable ref="vuetable"
       :api-mode="false"
       :fields="tableColumns"
       :data="itens">
  </vuetable>
  <pre>{{ itens }}</pre>
</div>


**Editado:**

O projeto VueTable-2 na versão 1.6.3 foi marcado como contendo um bug. O link da abertura no Git do issue. Aguardando a correção para fechar o tópico.


** Editado (corrigido) **

O bug foi corrigido na versão v1.6.5.
Observação, para quem utilizar a versão 1.6.3 estará com este bug

adicionou 238 caracteres ao conteúdo
Fonte Link
Bruno Rigolon
  • 3,3mil
  • 11
  • 17

Estou tentando utilizar o VueTable-2 enviando as informações via a props data. Procurei em diversos sites, testei e nada funcionou, inclusive achei este exemplo no formato que preciso, mas também não funciona. O código mais básico, seria o código abaixo, alguém por acaso sabe o porquê disto não funcionar? Ou a maneira correta.

Coloquei para exibir na tela o objeto de teste que a tabela deveria renderizar.

Obs.: Com o tipo de api-mode igual a true funciona perfeitamente, o que preciso, é que funcione com api-mode igual a false.

Vue.use(Vuetable);
new Vue({
  el: '#app',
  data: {
    tableColumns: ['id', 'name'],
    itens: [
        { id: 1, name: "Jogos Vorazes" },
        { id: 2, name: "Todo mundo em Pânico" }
    ],
  }
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="app" class="container">

  <h1 class="text-center">Vuejs com VueTable-2</h1>

  <hr>

  <vuetable ref="vuetable"
       :api-mode="false"
       :fields="tableColumns"
       :data="itens">
  </vuetable>
  <pre>{{ itens }}</pre>
</div>


**Editado:**

O projeto VueTable-2 na versão 1.6.3 foi marcado como contendo um bug. O link da abertura no Git do issue. Aguardando a correção para fechar o tópico.

Estou tentando utilizar o VueTable-2 enviando as informações via a props data. Procurei em diversos sites, testei e nada funcionou, inclusive achei este exemplo no formato que preciso, mas também não funciona. O código mais básico, seria o código abaixo, alguém por acaso sabe o porquê disto não funcionar? Ou a maneira correta.

Coloquei para exibir na tela o objeto de teste que a tabela deveria renderizar.

Obs.: Com o tipo de api-mode igual a true funciona perfeitamente, o que preciso, é que funcione com api-mode igual a false.

Vue.use(Vuetable);
new Vue({
  el: '#app',
  data: {
    tableColumns: ['id', 'name'],
    itens: [
        { id: 1, name: "Jogos Vorazes" },
        { id: 2, name: "Todo mundo em Pânico" }
    ],
  }
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="app" class="container">

  <h1 class="text-center">Vuejs com VueTable-2</h1>

  <hr>

  <vuetable ref="vuetable"
       :api-mode="false"
       :fields="tableColumns"
       :data="itens">
  </vuetable>
  <pre>{{ itens }}</pre>
</div>

Estou tentando utilizar o VueTable-2 enviando as informações via a props data. Procurei em diversos sites, testei e nada funcionou, inclusive achei este exemplo no formato que preciso, mas também não funciona. O código mais básico, seria o código abaixo, alguém por acaso sabe o porquê disto não funcionar? Ou a maneira correta.

Coloquei para exibir na tela o objeto de teste que a tabela deveria renderizar.

Obs.: Com o tipo de api-mode igual a true funciona perfeitamente, o que preciso, é que funcione com api-mode igual a false.

Vue.use(Vuetable);
new Vue({
  el: '#app',
  data: {
    tableColumns: ['id', 'name'],
    itens: [
        { id: 1, name: "Jogos Vorazes" },
        { id: 2, name: "Todo mundo em Pânico" }
    ],
  }
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="app" class="container">

  <h1 class="text-center">Vuejs com VueTable-2</h1>

  <hr>

  <vuetable ref="vuetable"
       :api-mode="false"
       :fields="tableColumns"
       :data="itens">
  </vuetable>
  <pre>{{ itens }}</pre>
</div>


**Editado:**

O projeto VueTable-2 na versão 1.6.3 foi marcado como contendo um bug. O link da abertura no Git do issue. Aguardando a correção para fechar o tópico.

Fonte Link
Bruno Rigolon
  • 3,3mil
  • 11
  • 17
Carregando