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.

Your files wouldn't be going through validation if a configuration didn't exist. Several different config files are possible, including configuration directly inside of package.json. You're sure you have no eslint config at all? — yoduh
– yoduh, Commented Oct 17, 2023 at 22:15
Hi Yoduh, it seems that package.json contains some eslint configuratoin. I need to look into the documentation in more depth. Thanks. — domjanzsoo
– domjanzsoo, Commented Oct 18, 2023 at 20:36

oyal · Accepted Answer · 2023-10-18 04:05:57Z

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

answered Oct 18, 2023 at 4:05

oyal

2162 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

domjanzsoo Over a year ago

That was right, I did try to bind them before, but at that time I forgot to remove the curly brackets. Quite silly mistake. Thank you.

Collectives™ on Stack Overflow

Vue - Eslint Complaining About Missing Variable in Setup Script

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related