Configuring JsFiddle with Vue and integrating vue-tables-2 - The variable "t" is not defined

Seeking assistance for implementing the vue-tables-2 package and encountering a persistent issue. Despite my efforts to set up a jsfiddle, I keep encountering an error stating "t is undefined" even with a simple implementation. Has anyone faced this specific error before? My assumption is that it might be related to importing dependencies, but I haven't been able to troubleshoot it effectively.

I welcome any suggestions on how to successfully run the jsfiddle.

HTML

<div id="app">
  <div class="col-md-8 col-md-offset-2">
    <div id="people">
      <v-server-table url="https://jsonplaceholder.typicode.com/users" :columns="columns" :options="options">
      </v-server-table>
    </div>
  </div>
</div>

JavaScript

Vue.use(VueTables.ServerTable);

new Vue({
    el: "#people",
    data: {
        columns: ['name', 'username'],
        options: {
            // see the options API
        }
    }
});

https://jsfiddle.net/kbpq5vb3/35/

Answer №1

It appears that the server is not returning the data format required by vue-tables-2, as outlined in the documentation:

The expected JSON object should have two properties:

  • data : array - An array of row objects with consistent keys.
  • count: number - Total count before limit.

If you are unable to modify what the server sends, you may need to resort to using a client-side table where you can fetch the data using axios.

A simple example of a client-side table that uses axios to retrieve data. https://jsfiddle.net/kbpq5vb3/38/

Answer №2

If you're unable to modify the server response, one option is to utilize the client-side table and fetch data using axios.

However, there's another approach. You can still work with the server component by utilizing the requestAdapter and responseAdapter options to structure the request and response as needed.

For illustration (Using Github's API):

<div id="app">
  <h3>
    Vue Tables 2 - Server Side Demo
  </h3>
  <div class="col-md-8 col-md-offset-2">
    <div id="people">
      <v-server-table url="https://api.github.com/users/matfish2/repos" :columns="columns" :options="options">
      </v-server-table>
    </div>
  </div>
</div>

JavaScript

Vue.use(VueTables.ServerTable);

new Vue({
  el: "#people",
  methods: {
    formatDate(date) {
      return moment(date).format('DD-MM-YYYY HH:mm:ss');
    }
  },
  data: {
    columns: ['name', 'created_at', 'updated_at', 'pushed_at'],
    tableData: [],
    options: {
      perPage: 25,
      perPageValues: [25],
      orderBy: {
        column: 'name',
        ascending: true
      },
      requestAdapter(data) {
        return {
          sort: data.orderBy,
          direction: data.ascending ? 'asc' : 'desc'

        }
      },
      responseAdapter({data}) {
        return {
          data,
          count: data.length
        }
      },
      filterable: false,
      templates: {
        created_at(h, row) {
          return this.formatDate(row.created_at);
        },
        updated_at(h, row) {
          return this.formatDate(row.updated_at);
        },
        pushed_at(h, row) {
          return this.formatDate(row.pushed_at);
        }
      }
    }
  }
});

https://jsfiddle.net/matfish2/js4bmdbL/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Verifying a checkbox selection within an Autocomplete feature using MUI

[ { label: 'First', checked: false }, { label: 'Second', checked: true } ] Here is a brief example of how the data may be structured. I am utilizing Material UI's Autocomplete feature to enable searching based on labels. Thes ...

Updating multiple records in MongoDB using ObjectID as the criteria for selection can be achieved by leveraging the

I am currently working in the Mongo shell on Ubuntu and have a Collection with 1 million documents. My goal is to select 50,000 records based on their ObjectID and update one of the values. Is there a way to specify a range of 50,000 documents for the upd ...

Direct your attention towards the FormKit component

Seeking to set focus on the initial element within a FormKit form. I attempted to achieve this by referencing and focusing on it upon mount, but encountered an issue. Here is my unsuccessful code snippet: <script setup> import { ref, onMounted } from ...

Is it possible to integrate a GWT library into Dart programming?

Considering migrating to Dart, but unsure of its maturity. Can a library originally written in GWT be used in Dart? ...

Issue with hidden event callback not functioning properly in Bootstrap 3 popover

After studying this example, I attempted to incorporate a hidden callback function. While the show callback is functioning perfectly, the hidden callback seems to be ineffective. Can someone shed light on why this issue is occurring? To showcase the probl ...

Generate HTML content based on the permissions from a REST API

I have a frontend that renders based on user permissions from a REST API. These permissions could include deleting users, creating users, adding users to workflows, and more. Most of these permissions are managed by an administrator. So my question is: H ...

Protractor - Error: prop is undefined

Need assistance in identifying an error. Currently, I am learning Protractor and attempting to create a basic test using Page Object. //login_pageObject.js let loginContainer = function() { this.usernameInput = $("input.login-form-01"); this.passwordInp ...

Execute React program within VM Azure

After setting up my React application on Azure's virtual machine, I encountered an issue. When trying to access the public URL (DNS) of the VM, I received a "site can't be reached" message. This is the process I followed to launch my project on ...

Utilize jQuery to set a cookie, then apply the bodyclass retrieved from the cookie upon page

I have a button that changes the body class to .blackout For this, I am utilizing js-cookie library to manage cookies. The code snippet associated with my button is shown below: <script> $('#boToggle').on('click', function(e) { ...

Challenges when working with AJAX/jQuery in terms of fetching JSON data and setting dataType

I am currently facing a challenge with my practice of AJAX/jQuery coding. Despite my efforts to learn and improve, I find the concepts of jQuery and AJAX quite perplexing. Specifically, I am struggling to understand dataTypes and how to manage different ty ...

Accessing a resource file from a compiled JAR archive

One issue that I am facing involves the project structure of my Maven Java project. It follows a typical layout: src/main/java - project .java files src/main/resources - project resources (log4j2.xml) src/test/java - .java files for tests src/test/r ...

Modifying attributes for individual components in Vue.js classes

Recently, I integrated a reusable component called "LightBox" into my website, which displays images in higher resolution. The LightBox functionality is linked to each element having a thumbnail. However, I encountered an issue. There are multiple elements ...

Starting up various modules in Angular 6 using arrays

Can an array be declared and used to bootstrap multiple components in module.ts? I attempted the following: export var initialComponents = []; initialComponents.push(AppComponent); if(condition) { initialComponents.push(IchFooterComponen ...

Progressing with JavaScript: Implementing Sound Controls and Dynamic Image Switching

I am looking to create a button that, when clicked, displays a small image and plays a sound. The button should change to a different image and stop the sound when clicked again. Essentially, it functions as a "start" button that loops the sound and change ...

Javascript text validation is malfunctioning as the alert message fails to appear

Looking for a simple form validation script: <script language=”javascript”> function checkForm(register) { if (""==document.forms.register.FNAME.value){ alert("Please fill out this field!"); document.forms.register.FNAME.focus( ...

Innovative sound system powered by React

I am working on implementing a music player feature on a website where users can select a song and have it play automatically. The challenge I am facing is with the play/pause button functionality. I have created all the necessary components, but there see ...

The React Component has been displayed on the screen a total of 5 times within the Ionic

While working on my app that includes a dashboard to display data, I noticed in Chrome's console that the render method is being called 5 times. This results in an annoying bouncing effect when the app page is re-rendered. How can I prevent the render ...

The Vue.js reactivity system does not detect changes when a property is updated within a WebRTC callback

Is Vue.js component creation becoming a challenge for you? Imagine creating a small component that requires permissions for the camera and microphone from the user, displaying that stream on a canvas. Sounds simple, right? However, let's face reality ...

Struggling to get my JavaScript function for calculating one rep max to work, need some help figuring out the issue

I have been working on a one rep max calculator using the Epley Formula. However, when I try to call the function, it returns as undefined. I have utilized the parameters weight and reps, both of which are parsed as integers, believing that they would be e ...

The issue with Angular's mat-icon not displaying SVGs masked is currently being investigated

I have a collection of .svgs that I exported from Sketch (refer to the sample below). These icons are registered in the MatIconRegistry and displayed using the mat-icon component. However, I've observed issues with icons that utilize masks in Sketch ...