Vue and Jexcel: maximizing efficiency with event handling and dynamic calculations

I am trying to utilize the vue wrapper for jexcel and want to trigger the undo function from the toolbar computed field. However, I am facing difficulties accessing the spreadsheet instance as it throws an error saying 'this.undo is undefined.'

<template lang="html">   
  <div class="wrapper-jexcel">
    <button class="" @click="getData(jExcelObj)">Data</button> 
     <button class="" @click="jExcelObj.undo()">Undo</button> 
    <input
      type="button"
      value="Add new row"
      @click="jExcelObj.insertRow()"
    />
    <div id="spreadsheet" ref="spreadsheet"></div>
  </div>
</template>
import jexcelStyle from "jexcel/dist/jexcel.css"; // eslint-disable-line no-unused-vars
import jexcel from "jexcel"; // eslint-disable-line no-unused-vars
import db from '@/firebase/init'
import firebase from 'firebase'

export default {
  name: "workbook",
  data() {
    return {
      workbookid: this.$route.params.workbookid,
      myCars: [],
      columns: [
        { type: "text", title: "Car", width: "120px" },
        {
          type: "dropdown",
          title: "Make",
          width: "250px",
          source: ["Alfa Romeo", "Audi", "BMW", "Honda", "Porshe"]
        },
        { type: "calendar", title: "Available", width: "250px" },
        { type: "image", title: "Photo", width: "120px" },
        { type: "checkbox", title: "Stock", width: "80px" },
        {
          type: "numeric",
          title: "Price",
          width: "120px",
          mask: "$ #.##,00",
          decimal: ","
        },
        { type: "color", width: "100px", render: "square" }
      ]
    };
  },created() {
    this.getworkbook()
  },

  methods: {
    onchange(){
      console.log('change');
    },
    insertRowc() {
      console.log(this);
      // this.spreadsheet.insertRow();
    },
    undo(){
      console.log('test');
        jExcelObj.undo();
    },

 getData(payload) { 
   console.log(this.myCars);
   console.log(payload);
  // this.myCars = payload.data
 }
  },
  computed: {
    jExcelOptions() {
      var self = this;
      return {
        data: this.myCars,
        columns: this.columns,
        search: true,
        //fullscreen: true,
        minDimensions: [20, 40],
        defaultColWidth: 100,
        allowComments: true,
        toolbar: [

              { type:'i', content:'undo', onclick:function() { return jExcelObj.undo(); } },
        { type:'i', content:'redo', onclick:function() { this.redo(); } },
        { type:'i', content:'save', onclick:function () { test.download(); } },
        { type:'select', k:'font-family', v:['Arial','Verdana'] },
        { type:'select', k:'font-size', v:['9px','10px','11px','12px','13px','14px','15px','16px','17px','18px','19px','20px'] },
        { type:'i', content:'format_align_left', k:'text-align', v:'left' },
        { type:'i', content:'format_align_center', k:'text-align', v:'center' },
        { type:'i', content:'format_align_right', k:'text-align', v:'right' },
        { type:'i', content:'format_bold', k:'font-weight', v:'bold' },
        { type:'color', content:'format_color_text', k:'color' },
        { type:'color', content:'format_color_fill', k:'background-color' },
        ]
      };
    }
  },
  mounted: function() {
    //console.log(this.jExcelOptions);
    //console.log(this.$refs["spreadsheet"]);
    const jExcelObj = jexcel(this.$refs["spreadsheet"], this.jExcelOptions);
    // Object.assign(this, jExcelObj); // pollutes component instance
    Object.assign(this, { jExcelObj }); // tucks all methods under jExcelObj object in component instance
    // console.log(this.jExcelObj);
  }
};

Is it necessary to pass the instance into the computed method? I am finding it challenging to grasp how to handle instances of a wrapper plugin and access the methods.

Answer №1

To retrieve the instance, simply follow the code below:

let tableInstance = document.getElementById('spreadsheet').jexcel;

tableInstance.undo();
tableInstance.getData();

Answer №2

initialized: function() {
  let workbook = excelSpreadsheet(this.$el, settings);
  Object.merge(this, workbook);
}

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

The process of obtaining and sending a token from an HTML page while submitting a form request to a Laravel 5 application involves a few key steps

My application consists of the client side being written in HTML and Angularjs, while the server-side is using Laravel 5. Every time I submit my form, I send the models using $http to a route in my Laravel 5 app, but I continuously encounter the error: pr ...

selenium tutorial: Testing tooltip functionality with Python

<div class="icon_png information icon_baggageyes" title="getTooltip()"></div> Here, a tooltip is displayed using the getTooltip() function. Is there a method to retrieve the return value of the function for testing with Selenium? ...

Guide to inserting an HTML file into an article's content

After downloading an extension from freefrontedit and uploading it to my server in the directory /accordeon, I successfully accessed it by pointing my browser to . However, I am now faced with the challenge of loading the index.html into my Joomla article ...

What are the reasons behind the pagination with numbers not functioning properly in Vue?

I've encountered an issue with my Vue application using Vuex while implementing pagination. The problem lies in the fact that the events stored are not being displayed, and neither are the page numbers for pagination. Another issue is that the paginat ...

Whenever I attempt to include state in a React class that is declared as a constant, I consistently encounter the error message: "TypeError:

Apologies for the redundancy, but as a newcomer to React, I previously inquired about a similar issue and have since modified my code. My current challenge involves trying to access a state value within a const React class. Below is the excerpt from my Ar ...

Looking to create an anchor tag that navigates to a specific ID on the page while accommodating a fixed header placement

In my application, the homepage's carousel displays multiple images with dynamically generated anchor tags that link to different routes. When clicking on the anchor tag, the page scrolls to the linked image but is obstructed by a fixed header. I want ...

Redirecting in Laravel after making an AJAX request results in a "Method Not Allowed" error

I've encountered an unusual problem with my web application built using Vue 3 and Inertia, which includes forms. So, here's the scenario: If I have two browsers open and log out in one, then trigger an Ajax request in the other, it goes through t ...

What is the best way to send the link's ID to an AngularJS controller?

I have a scenario similar to the following: <a href="#" title="Post 1" id="car1"> Audi car </a> <a href="#" title="Post 1" id="car2"> BMW car </a> How can I pass the ID to the controller? I attempted the following: <a href= ...

Exploring the integration of web components within VuePress

I'm currently working on integrating Stoplight into our vuepress site. This involves implementing a web component called elements-api provided by stoplight. Here's my progress so far: APIStopLight.vue <template> <main class="a ...

Troubleshooting problems in transferring JSON data between a React application and a Spring Boot service running locally

Running a local Springboot server, accessing it locally in the browser returns a properly formatted JSON object. However, encountering issues when trying to fetch this JSON object from a React application running on node locally. Managed to overcome CORs h ...

Navigating TS errors when dealing with child components in Vue and Typescript

Recently, I encountered an issue where I created a custom class-based Vue component and wanted to access its methods and computed properties from a parent component. I found an example in the Vue Docs that seemed to address my problem (https://v2.vuejs.org ...

Learn how to call class methods using jQuery events by utilizing the on() method

I'm attempting to create a reusable "component" using both HTML5 and accompanying JavaScript code that can be utilized multiple times. First, let's examine the HTML5 component code: <div class="listEditor" id="myStringList"> <div id="li ...

What is the significance of the abbreviation 'dbo' in a MongoDB - Express application?

Below is the code snippet provided: app.js const express = require("express"); const app = express(); const cors = require("cors"); require("dotenv").config({ path: "./config.env" }); const port = process.env.PORT | ...

React - Incorporating Axios catch errors directly within form components

When a user registers, my backend checks if the email and/or username provided are already in use by another user. The response from Axios catch error is logged into the web console. I want to associate each email and username with their respective fields ...

Creating a dynamic polyline with custom data on Mapbox is a great way to enhance your mapping experience

Hey everyone, I'm looking to create a polyline or path on Mapbox using my own data. I came across an example on mapbox.com that shows how to draw a sine wave on the map. How can I customize this example to use my own data? <!DOCTYPE html> <h ...

I am leveraging AngularJS to display a modal window with Bootstrap and Spring servlet integration

In my project, I am utilizing AngularJS to display multiple pages. One of these pages contains a smart-table where I showcase the details of "users". When I wish to edit one of the users, I aim to display the edit page as a popup window. Below is an excer ...

How come .trim() isn't cooperating with me?

I am encountering an issue with this particular piece of javascript. Every time I attempt to use it, nothing is displayed in my div. Instead, it simply adds ?weight=NumberInputed&measure=lbsOrkgs&submit=Submit to the URL. <h2>What size d ...

The function does not have a specified return value

I've been grappling with this issue for quite some time and I can't figure out what's causing the problem. In my code, I have a separate class called Database.js that handles MySQL functions, manages connections, queries, etc. My goal is to ...

The fitBounds() method in Google Maps API V3 is extremely helpful for adjusting

I am trying to display a map on my website using this code: function initialize() { var myOptions = { center: new google.maps.LatLng(45.4555729, 9.169236), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP, panControl: true, mapTyp ...

Exploring ways to retrieve a video thumbnail with VueJS3

I am currently working on a project to create a simple program that retrieves movies from my AWS-S3 bucket and transforms them into picture thumbnails. Below is the code I have written: <template> <img :src="imgURL" class="card- ...