Troubleshooting VueJS custom prop binding issue within b-form component

I recently tried creating a custom component with a custom attribute following the guidance from this Vue documentation. Here is how I set it up:

    Vue.component('y-form-checkbox', {
    props: ['chkLabel'],
    template: `<b-form-group label="label">
                <b-form-checkbox>
                  {{ chkLabel }}
                </b-form-checkbox>
            </b-form-group>`
    });

After setting up the component, I tried using it like this:

<y-form-checkbox chkLabel="Something special"></y-form-checkbox>

However, I encountered an issue where the chkLabel did not bind to the component's template as expected. Instead, I only saw a checkbox without a label. Can anyone advise on why this might be happening? Thank you in advance!

Answer №1

It is recommended to use the kebab-case format over camelCase when working with props:

 <y-form-checkbox chk-label="Something special"></y-form-checkbox>

However, maintain the camelCase format in the component props declaration:

 Vue.component('y-form-checkbox', {
  props: ['chkLabel'],
  template: `<b-form-group label="label">
            <b-form-checkbox>
              {{ chkLabel }}
            </b-form-checkbox>
        </b-form-group>`
});

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

Receiving a 200 (OK) error following an axios call occurs only prior to refreshing the page

Currently, I am using an axios call to fetch some JSON data. The method being utilized is get and it requires credentials for logging in. checkCredentials (username, password) { var configData = { withCredentials: true, method: 'get', ...

The current export script is experiencing difficulties when working with the next/image component

I am working on a project that I need to build and export, but I am facing an error during the process. Below is the build script found in my package.json file: "scripts": { "build": "next build && next export" } ...

Executing JavaScript's addEventListener() function without specifying the event that triggers it

I am currently working on creating a grid of boxes that can be clicked, sending notifications with their respective IDs to the server using SocketIO. <body> <div class="wrapper"> <div id="1" class="box"></div> <div id="2 ...

Ways to select the initial 10 rows, final 3 rows, and middle 2 rows using Javascript

As a newcomer to Javascript, I have a couple of questions: 1) How can I retrieve the first 10 rows, the last 3 rows, and the 2 rows in the center using the code var firstTable = $('#aaa table').eq(0); 2) Is there a way to create and assign new ...

What is the best way to dynamically resize the content inside a div element based on its dimensions using

My challenge is to create a centered div on the page that resizes with the viewport while maintaining an aspect ratio of 16:9. However, I also need the font and content inside the div to scale proportionally as it resizes. Using vmin works well in most cas ...

When using Tailwind CSS with flexbox, elements do not expand horizontally as expected

Is there a way to prevent the label from expanding along with the description in tailwindcss? <script src="https://cdn.tailwindcss.com"></script> <div class="flex items-center"> <div>block</div> <div class="m ...

What is the best way to re-run a JavaScript function after reRendering a form?

After re-rendering a form with partial requests, I am in need of re-executing javascript. Simply adding javascript after the XHTML content won't do the trick as it's a partial request scenario. Additionally, using "onComplete" is not an option si ...

Bootstrap's alignment of items is not functioning as anticipated

For my simple webpage, I am using Bootstrap 4 to add a header and footer. However, I am facing an issue where the footer is not displaying at the end of the page. Below is the HTML code I am using. Can anyone please guide me on what to do? html, body ...

Looking for a Horizontal Layout?

@foreach (var item in APModel) { <div class="row row-cols-1 row-cols-md-2 g-4"> <div class="col"> <div class="card" style="width: 18rem;"> <img src="h ...

Exploring the utilization of functions beyond module exports

Striving to clearly communicate my intentions, please feel free to ask if anything is unclear. Within a file named www, I am configuring my socket as follows: var server = http.createServer(app); var io = require('socket.io')(server); require(& ...

How can I connect a click event on one div to trigger another using jquery?

Could someone assist me with the proper terminology? I am interested in clicking one div, which would then automatically trigger the click on another div. For example, if I click on div 1, I want div 2 to be clicked by JavaScript without user interaction ...

Z-index behaving abnormally

I've been working on developing a website and one of the key features I'm trying to implement is a slideout menu that slides horizontally when the mouse hovers over it. To make development easier, I initially set the menu to be fully extended by ...

Shifting static information both above and below a 100vh element

At the moment, I have a stationary image in the center of my screen that moves horizontally when scrolling with the mouse. Now, I want to include a screen above and below this element, each with a height of 100vh. However, when I attempt to do so, the fixe ...

The blur feature in Tinymce isn't functioning properly when handling multiple editable textareas simultaneously

I am experiencing an issue with the Tinymce blur function not working correctly. I have multiple elements where Tinymce editor is being used. I am utilizing the dblclick event to edit a textarea, and everything works fine except for the blur event not trig ...

Error: Cross-origin request prevented in Chrome due to XMLHttpRequest loading issue

It seems there is a bug specific to Chrome, as this code works without issue in all other browsers. Here's the snippet of code causing the problem: $(function() { $('#content').load('home.html' + '#container').hide( ...

Vuejs components that have checkboxes already selected out of the box

Hey there, I'm facing a small issue. Whenever I click on the areas highlighted in the image, the checkbox on the left gets marked as well. Any idea why this might be happening? https://i.stack.imgur.com/nqFip.png <div class="form-check my-5&qu ...

Using PHP and JQuery to disable a button after the letter "U" is typed

I am looking for a way to disable the button when the term "U" (defined as Unable) appears. How can I achieve this? Below is the button in question: <input type="submit" class="form-control btn-warning" name="search" value="Search Data"></input& ...

How can I stop jQuery from repeatedly appending content every time I click the button?

Hey there, I have a question about calling a JSON array using jQuery. Every time I press the button, it loads the list again instead of multiplying. Here is the JSON array: [{"denumire":"Q Club"},{"denumire":"Carul cu Flori"},{"denumire":"La Rocca"}] And ...

What steps can be taken to make sure padding impacts all lines, not just the first one?

I have added padding to a span of text using Bootstrap. However, the issue arises when the text goes to the next line using < br > - the padding for that line and beyond disappears. Here is the specific code causing this problem: <div class="col ...

The PDF document appears quite different from the original HTML page it was created from

Is there a way to create a PDF document that mirrors the appearance of a web page using jsPdf? When attempting this, it seems that the font size, text alignment, and table alignment of the resulting PDF do not match that of the original web page. Additiona ...