Struggling to retrieve the fake JavaScript data for my Vue.js table

I am a beginner in the development field and encountering the following error report while working with Vue.js 3

115:5 error  'vendorTable' is assigned a value but never used  no-unused-vars   
115:23  error  'Vue' is not defined    no-undef   
117:3   error  Object declaration on 'data' property is deprecated. Using function declaration instead  vue/no-deprecated-data-object-declaration.

Within the template section

  <table id="vendorTable">
    <thead>
      <tr>
        <th>Vendor Code</th>
        <th>Vendor Name</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in rows" :key="row.vendorTable">
        <td>{{ row.vcode }}</td>
        <td>{{ row.vname }}</td>
      </tr>
    </tbody>
  </table>

Within the script section

<script>
var vendorTable = new Vue({
  el: "#vendorTable",
  data: {
    rows: [
      {
        vcode: "VC001",
        vname: "ABC Pvt Ltd",
      },
      {
        vcode: "VC002",
        vname: "XYZ Pvt Ltd",

      },
    ],
  },
});
</script>

Answer №1

Using new Vue is specific to Vue version 2.x. To use Vue 3, the syntax has been updated:

Vue.createApp({
  el: '#vendorTable',
  ...
})

Answer №2

Update your code to use the new syntax in Vue 3

 const vendorTable = {
      data() {
        return {
        rows: [
          {
            vcode: "VC001",
            vname: "ABC Pvt Ltd",
          },
          {
            vcode: "VC002",
            vname: "XYZ Pvt Ltd",
    
          },
        ],
        }
      }
    }
    
    Vue.createApp(vendorTable).mount('#vendorTable')

and

<tr v-for="row in rows" :key="row.vendorTable"> 

"row.vendorTable" is incorrect, instead please use "row.vcode"

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

Exploring the intricacies of React's useEffect: Solving the challenge of updating data when two separate dependency arrays are

I am facing an issue with two different useEffect hooks where the dependency arrays are different. const [dateFilterSort, setDateFilterSort] = useState({ queryText: initialQueryText(params.sortName), cardText: initialCardText(params.sortName), ...

Implementing a dynamic loading strategy for Google reCAPTCHA based on language selection

I have a unique application that requires the selection of one language out of four options (English, French, Dutch, español) in a form. Below the language selection, the Google reCaptcha is displayed. I am looking to dynamically load the reCaptcha scrip ...

Is it possible to remove an element from a data structure in a web application using an HTTP command?

Apologies for the confusing title, I struggled to find a better way to describe it. Imagine sending a GET request to an API and receiving this data: { {id: 1, name: "John Doe", tags: ["Apple", "Orange", "Pear"]}, {id: 2, name: "Jane Doe", tags: [ ...

having difficulty with the design of my google map

Struggling to style my Google Map this week - I have the JSON values but no clue how to add them into the JavaScript. Also, need to move the zoom bar control to the right instead of it being hidden behind site content on the left. Any help would be greatl ...

Issue with installing vscode-ripgrep during VSCode build/run process

After attempting to build and run VSCode on my Ubuntu 17.10 by following the instructions from this guide: https://github.com/Microsoft/vscode/wiki/How-to-Contribute#build-and-run, I encountered an issue when installing dependencies using yarn. The error m ...

Looking to set the "min" attribute for an input type="date" in HTML5 with a specific date format preselected?

My upcoming date has a specific format as detailed below. Date_received = Tue Apr 05 2016 00:00:00 GMT+0530 (India Standard Time) To set the 'min' attribute for the HTML5 input type="date" datepicker, I need to initialize it using the following ...

Having trouble with adding a class on scroll?

My challenge is to extract the header from this website, by adding an additional class when the user scrolls at a position greater than 0. I thought it would be easy, but Java always presents problems for me. Here’s the code I came up with: <!DOCTY ...

Three.js tutorial: Rotating items on each axis individually

Looking to create an interactive 3D item that users can rotate with their mouse freely? I experimented with using three quaternions, one for each axis, and then multiplying them together to determine the final position of the item. // Initializing xQuat, y ...

What is the best way to display an SVG file in a React application?

I am trying to figure out how to upload an SVG file and display a preview in a React component. I attempted to convert the SVG file into a React component by using the DOMParser to parse the SVG-XML string into a Document Object, but it is not functionin ...

Numerous events have been successfully integrated into the angularjs-bootstrap-calendar

Currently, I am facing a challenge with loading all my event data from the server using angular-bootstrap-calendar. Due to the large volume of events, it is taking a considerable amount of time to load. I am exploring the possibility of fetching only a mo ...

Experiencing peculiar behavior with the delete keyword in JavaScript

Okay, so here's the deal... var obj = people[0]; obj.oAuthID = null; delete obj.oAuthID; This code snippet returns... { "uuid": "39b2b45f-1dde-4c9a-8765-1bc76f55848f", "oAuthID": null, "date": "2013-10-21T16:48:47.079Z", "updated": "2013-10 ...

``Why Laravel and Vue JS Routing is displaying a "Page not found" error message

I recently used a tutorial I found at However, when trying to access localhost/admin/companies, I encountered a "Page Not Found" error. I attempted to make changes as follows: const router = new VueRouter({ routes: [ { path: '/admin/companies&a ...

What is the process for viewing the collections of all databases while logged in as an administrator?

My aim is to display all databases along with their collections, similar to logging in as an admin user into robo3T, for example. Using the two commands below poses no issue. However, when I use the listCollections command, I only get the collections from ...

Creating a list repeater using v-for in Vue.js 2 with computed property

Seeking assistance with adding computed columns to a table (last three columns). Suspecting the issue lies in the computed property not correctly referencing the record. Any simple solutions that I might be overlooking? Appreciate any thoughts or insights! ...

Validating uploaded files in Javascript and handling server upload operations

I'm having a small issue with a webpage I am creating. Essentially, I am looking to validate whether a user has selected a file and then upload it to the server. I understand this can be done using JavaScript: if(document.getElementById("uploadBox"). ...

Adjust the dimensions of the canvas without disrupting the existing artwork

I am currently working on a pixel art application where I am facing an issue with saving images from the canvas. The saved image appears small and pixelated when I try to resize it. I would like to resize the image to larger dimensions, but I am unsure of ...

Error in TypeScript: Typography type does not accept 'string' type as valid

As I attempt to implement the Typography component from material-ui using TypeScript, I encounter a perplexing error message TypeScript is throwing an error: Type 'string' is not assignable to type 'ComponentClass<HTMLAttributes<HTMLE ...

Ways to prevent a specific class from using CSS styling

My HTML <body> <div id="finalparent"> <!--many parent divs here--> <div id="1stparent"> <div id="txt_blog_editor" class="box" style="width: 1097px;"> <div class="abc anotherclass"> </div> & ...

How can I extract the text from a textarea in react-bootstrap and pass it to a function when a button is clicked?

Below is the React-Bootstrap code that I am working with: <Form> <Form.Group className="mb-3" controlId="exampleForm.ControlTextarea1"> <Form.Label>Example textarea</Form.Label> <Form.Control as=&quo ...

Angular 2 integration for Oauth 2 popup authorization

I am in the process of updating an existing Angular application to utilize Angular 2. One challenge I am facing is opening an OAuth flow in a new pop-up window and then using window.postMessage to send a signal back to the Angular 2 app once the OAuth proc ...