Do the vue/attribute-hyphenation default rule and vue/prop-name-casing conflict with each other?

I am currently working on a project using eslint-plugin-vue, where I have both child and parent components. The issue at hand is that the child component needs to pass a value into the parent component.

// parent
export default {
  name: 'recordDetail',
  props: {
     'record-id': { // however this will violate vue/prop-name-casing
        type: Number
     }
  }
}
<!-- child -->
<recordDetail
  :record-id="123"> <!-- it will violate vue/attribute-hyphenation if this is recordId="123" -->
</recordDetail>

I would appreciate any advice on how you would recommend handling this situation and what the best practices are when working with Vue. Thank you.

Answer №1

When working with templates, it is recommended to use kebab-case, and when dealing with JavaScript code, it is best to stick to camelCase.

<recordDetail :record-id="123" />

This structure will be equivalent to the following in JavaScript:

props: {
  recordId: {
  ...
  }
}

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

What is the alternative method of sending a POST request instead of using PUT or DELETE in Ember?

Is there a way to update or delete a record using the POST verb in Ember RESTAdapter? The default behavior is to send json using PUT or DELETE verbs, but those are blocked where I work. I was wondering if there's a way to mimic Rails behavior by send ...

What is the best way to create navbar items using vue-router links that will toggle the visibility of the navbar?

I have a navigation bar that is functioning properly, except for the fact that it does not close when an item is clicked. It only closes when I click anywhere else in the window. My setup involves Laravel 8 and Vue 3 with Bootstrap 5 installed. This is m ...

Fetching post value via AJAX in Codeigniter views: A step-by-step guide

Having issues receiving Ajax response as it is coming back null. The HTML layout includes: <form method="post" action="<?php $_SERVER['PHP_SELF'] ?>"> <select class="form-control" class="form-control" id="choose_country"& ...

Dealing with issues of toggling visibility with jQuery when using a dropdown menu

Inside a hidden drop down div, the focus is on "DC" right now. In the image below, we are looking at sales: HTML: <td class="edit"> <select class="touch" style="display: none;"> <option value="11">Rebuying</option><option value ...

Adjust the time increment dynamically within the dropdown menu

I have a challenge to make a dynamic dropdown field that adjusts based on the value of a previous input field. There is a dropdown for selecting length, with options like 30 min., 60 min., and 90 min.. Additionally, there are input fields for startTime and ...

Keep an eye on the audio time changes in Vue!

I am working on a project where I have an audio file that plays songs. Currently, I am developing a slider that corresponds to the length and current time of the songs. However, I am facing a challenge as I cannot use player.currentTime in the watch compon ...

Step-by-step guide on displaying SVG text on a DOM element using Angular 8

I have a FusionChart graph that I need to extract the image from and display it on the same HTML page when the user clicks on the "Get SVG String" button. I am able to retrieve the SVG text using this.chart.getSVGString() method, but I'm unsure of ho ...

Issue with form action redirection on Node JS Express server not functioning correctly

My EJS application involves using jQuery in the JavaScript code to fetch JSON data from the Google Custom Search API. The app then uses the GET method to navigate to /search, passing the query as the attribute for q. Here's an example of the form&apos ...

As I embarked on my journey into node.js, I encountered some stumbling blocks in the form of errors - specifically, "Uncaught ReferenceError: module is not defined"

Embarking on my Node.js journey, I am delving into the world of modules. After ensuring that both node and npm are correctly installed, I will share the code below to provide insight into the issue at hand. Within my project, I have two JavaScript files - ...

Find a way to incorporate social media features into a web application that functions intermittently

Currently, I am in the process of developing a social media app and working on integrating a search feature to enable users to find friends. The code I have below seems to be functional at times but not consistent (quite frustrating!) The issue seems to st ...

How can I use an HTML button to activate a function that inserts text into a read-only text-box?

Trying to write a simple piece of HTML code that finds the number greater than or equal to the first initial amount that wholly divides the second given amount. The code attempts to divide the numbers, and if it fails, increments the first number by 1 and ...

Display HTML content in autocomplete using jQuery UI

I implemented a search feature on my website using jQueryUI, similar to how it works on Facebook. Below is the jQuery code: //search main function split( val ) { return val.split( ); } function extractLast( term ) { return split( term ).pop(); } ...

Tips on utilizing browser scroll for horizontal overflow of internal div?

I'm working on creating a dynamic page with a tree-like structure that easily exceeds the width of the browser window. My goal is to enable horizontal scrolling for the entire page using the browser's scrollbar, without needing a separate scrollb ...

Top recommendation for utilizing $scope variables in Angular applications

Currently, I am working on a new project and I want to ensure that I am correctly utilizing $scope. After watching an informative video on best practices, Miško mentioned that manipulating $scope properties directly may not be the best approach. Typical ...

There is a lack of communication between the tomcat application and the database

I am currently working on a web application that is stored in a war file and runs with Tomcat. Initially, I start my MySQL 5.7 database, followed by running a Spring Boot project created with the necessary files. After completing these steps, I deploy my ...

When consecutive DOM elements are hidden, a message saying "Hiding N elements" will be displayed

Provided a set of elements (number unknown) where some elements should remain hidden: <div id="root"> <div> 1</div> <div class="hide"> 2</div> <div class="hide"> 3</div> <div class="hide"&g ...

How can I implement an autocomplete feature in Vue.js?

Recently, I started working with Vue and decided to create a basic search app using Vue.js cdn. My goal is to add a suggestion bar that displays user IDs from a fake JSON server. For instance, if I input '1' in the search bar, I want only the use ...

Highcharts Maps - Circular zoom controls

Currently implementing the Highcharts API for a special project. All features are functioning well except for one issue. I am looking to make the zoom in/out buttons appear rounded. I have attempted using border-radius with 50%, as well as modifying the r ...

Encountering issues with the routing in my live Node.js project: ERROR

I am encountering issues with my project in production. I suspect it could be due to a misconfiguration or something similar. Could you please review the provided code snippets and see if you notice any potential issues? The project works fine locally, bu ...

Gather every hyperlink and input fields without utilizing jQuery

Is there a way to target all a and form elements without relying on jQuery? My end goal is to achieve the following functionality: document.querySelectorAll('a').forEach(element => { element.addEventListener('click', () => { ...