Is there a way to populate listColumns dynamically in vue-tables-2?

Imagine you have an array of category names passed as a prop.

When using vue-tables-2, how can you dynamically populate a category filter in the listColumns option?

listColumns: {
  type: [{
    id: 1,
    text: 'User'
  },
  {
    id: 2,
    text: 'Admin'
  }],
  category: function () {
    this.categories.map((cat, index) => { return { id: index, text: cat } })
  }
}

However, when attempting to do this as shown above, it results in the following error message:

[Vue warn]: Error in render: "TypeError: _this.opts.listColumns[column].filter is not a function"

Answer №1

Feel free to include your props within the options section.

options: {
  filterByColumn: true,
    listColumns: {
        type: this.categories
    }
}

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

Prevent floating labels from reverting to their initial position

Issue with Form Labels I am currently in the process of creating a login form that utilizes labels as placeholders. The reason for this choice is because the labels will need to be translated and our JavaScript cannot target the placeholder text or our de ...

What is the best way to fill in the jquery treeselect widget?

I'm struggling with populating the jquery treeselect widget using a json file or any other method. Since I am new to jquery/javascript, I'm sure I must be missing some basics. Although I have obtained the plugin from https://github.com/travist/j ...

Struggling to get getInitialProps working in dynamic routes with Next.js?

I am encountering an issue. The return value from the getInitialProps function is not being passed to the parent component. However, when I console.log the values inside the getInitialProps function, they appear to be correct. Here is the code snippet: i ...

What is the method of direction storage used by Three.js?

element, there is a discussion about coding a server for a new game developed by a group of friends. The question focuses on how to store the direction a player is looking at in a 3D plane efficiently. One suggestion is using an object with two variables ...

Learn the process of seamlessly uploading various document formats, videos, and previewing documents with Angular software

I am having trouble viewing uploaded files in the carousel. While I can see video and image files, other document formats are not displaying. Can someone please recommend a solution to enable viewing all types of documents as well? mydata = [] onSelect ...

Aligning the second heading alongside pictures and a lightbox

My issue is that I am struggling to center the "See More" link directly under each title link. Currently, it is pushed to the right and I can't seem to find a solution. Any help with this problem would be greatly appreciated. I attempted using display ...

The issue with fancybox links not functioning properly within ajax content

I'm looking to constantly update a specific section on my website using ajax, jquery, and php. Upon the initial page load, a javascript function is triggered to display the content of that section. Subsequently, json is utilized to check for any new ...

What is the best way to send a function or callback to a child process in Node.js?

In this scenario, imagine having a parent.js file with a method called parent var childProcess = require('child_process'); var options = { someData: {a:1, b:2, c:3}, asyncFn: function (data, callback) { /*do other async stuff here*/ } } ...

HTML-Formatted Email Content

Similar Question: MailTo with HTML body I am looking to utilize JavaScript to send emails. I came across this helpful post: Sending emails with JavaScript. My goal is to include images, bold text, and color changes in the email content. Does anyone h ...

Guide to incorporating eslint with Next.js in a project that already has an eslint configuration

I recently created a new next.js project within my existing Node.js project, which already has an eslint config set up. Here's how the folder structure looks now: ...

Adding an image in HTML from a different drive - step-by-step guide!

Currently, I am immersing myself in HTML, CSS, and JavaScript as I gear up for my upcoming school project centered around frontend development. Here's the issue I encountered. While attempting to insert an image into one of my HTML files, I ran into ...

Parsing JSON data repeatedly using JavaScript within an HTML environment

The following code I found on a popular web development website works perfectly: <!DOCTYPE html> <html> <body> <h1>Customers</h1> <div id="id01"></div> <script> var xmlhttp = new XMLHttpRequest(); var url ...

Tips for transferring information from Javascript to a PHP script

For the code in JavaScript that I have written to transfer data to PHP, I am encountering an issue where it doesn't seem to work properly. Here is the code snippet: function codeAddress() { var address = document.getElementById('address') ...

Guide on setting up ShareThis on a Vue.js project

I attempted to include this code in the public index.html file: <script type='text/javascript' src='https://platform-api.sharethis.com/js/sharethis.js#property=5f4e15b2e56e550012ae1e77&product=inline-share-buttons' async='a ...

What is the best way to divide text into key-value pairs using JavaScript?

I have data in text format from my Raspberry Pi that I need to insert into MongoDB as key-pair values or JSON for my Node.js Application. I'm relatively new to JavaScript and I'm looking for a solution. Any suggestions would be greatly appreciate ...

How to dynamically increase vote tallies with React.js

The voting system code below is functioning well, displaying results upon page load. However, I am facing an issue where each user's vote needs to be updated whenever the Get Vote Count button is clicked. In the backend, there is a PHP code snippet ...

Tips for avoiding identical selections in multiple drop-down menus within a table and sending the data to the server via a POST request

For instance: visualizing a chart of infants, where each row the user chooses baby GenderDropDown, then picks a name. It's crucial to prevent duplicate name selections throughout the chart. If a user selects Male & John, that choice should not be ...

Troubleshooting MODULE NOT FOUND Error in my First NodeJS Application: A guide to resolving common issues

Welcome to My NodeJS Learning Project! Embarking on my first NodeJS application journey, this project serves as a stepping stone for me to grasp the fundamentals. The goal is to create a basic CRUD web app for item management. Drawing from my experience i ...

Leveraging callback functions for dynamically updating a JSON structure

Recently, I've been working on a db_functions.js file that includes several functions designed to interact with a database. Here's an excerpt from the script: function getUsers(client, fn){ //var directors = {}; client.keys('*' ...

Integrating external information with components

Currently in my React application, I am fetching a list of stores by directly calling the API through the URL. const getStore = async () => { try { const response = axios.get( 'http://localhost:3001/appointment-setup/storeList& ...