Vue - Eslint Complaining About Missing Variable in Setup Script

Question

Funnily the Vue js documentation is highly suggesting to use the <script setup> syntax of the Composition API, the problem with it is that the documentation is very basic and it interferes with other tools (like eslint). I have this component:

<template>
 <div>
  <h3>User List</h3>
   <highup-table
     data="{{users}}"
     fields="{{tableFields}}"
   />
  </div>
</template>

<script setup>
import {HTTPClient} from "@/services/HTTPClient"
import HighupTable from '@/components/table/HighupTable'
import { ref } from 'vue'

const users = ref([])
const tableFields = {
  email: 'Email',
  first_name: 'First Name',
  last_name: 'Last Name',
  username: 'Username'
}

users.value = await HTTPClient.getData('/user-manager/users').then(data => {
  console.log(data);
  return data.data;
})

</script>

<style scoped>

</style>

The issue I'm facing is that eslint keeps complaining that the tableFields variable is not used, although it's used as a prop value in the template. I read in some articles that some eslint configuration might help with this, but I'm not very familiar with it, my project directory doesn't even have an .eslingrc.js file. Wondering if it's worth playing with it, or is it better to just simply disabling eslint. Any suggestion is much appreciated.

Answer 1

There is an error in your usage.

Correct usage: <highup-table :data="users" :fields="tableFields" /> or <highup-table v-bind:data="users" v-bind:fields="tableFields" />

You can learn more information here: https://vuejs.org/api/built-in-directives.html#v-bind