Learning the process of dynamically binding an id to an HTML tag in Vue.JS

I am currently utilizing Bootstrap Vue for UI and attempting to implement a collapsing feature using this provided link

For instance, using v-b-toggle.collapse-2 where the 2 represents a static id. However, I am interested in dynamically assigning this id based on a specific DB record, like the DB id. Here is an example of what I am trying to achieve:

<h3 v-b-toggle.collapse-{{data.id}}>Show</h3>

Unfortunately, when I try to use {{data.id}} inside the h3 tag, it does not compile and displays exactly as {{data.id}}. How can I successfully incorporate the variable data.id into the h3 tag?

Thank you

javascriptvue.js

Answer №1

According to the provided information, the attribute v-b-toggle is capable of accepting a JavaScript expression in the form of a string value. For example:

<!-- Example with value -->
<b-button v-b-toggle="'collapse-2'" class="m-1">Toggle Collapse</b-button>

In this scenario, it can be accomplished by binding a method to it:

<h3 v-bind:v-b-toggle="getTarget(data.id)">Show</h3>

methods: {
    getTarget(id) {
        return `'collapse-${id}'`;
    }
}

Answer №2

Give this a try.

<div>
  <!-- Using different methods -->
  <b-button v-b-toggle="'collapse-2'" class="m-1">Click to Collapse</b-button>

  <!-- Using a different technique -->
  <b-button v-b-toggle="'collapse-2'" class="m-1">Tap to Expand</b-button>

  <!-- Content that will collapse -->
  <b-collapse id="collapse-2">
    <b-card>This content can collapse and expand!</b-card>
  </b-collapse>
</div>

Check it out on codepen - https://codepen.io/Pratik__007/pen/YzXxGQK

Answer №3

Enclose the h3 tag within either a div or a span, and assign the innerHTML of that enclosing element to be the content of the h3 tag but processed within a function.

const createH3 = (identifier) => `<h3 v-b-toggle.collapse-${identifier}>Show</h3>`
<div v-html='createH3(identifier)'></div>

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

I'm noticing multiple repeated entries appearing when I try to set the cookie - what could be causing

Currently, I am utilizing the library js-cookie instead of my previous use of jquery.cookie. I have encountered an issue related to duplicating cookie entries. There are occasions when I invoke the following method: Cookies.set('my-cookie-name', ...

javascriptcookiesjquery-cookiejs-cookie

Harmonizing various client viewpoints in a ThreeJS scene featuring a unified mesh structure

I am fairly new to ThreeJS and I am curious to know if it is possible to achieve the following, and if so, how can it be done: Two web browser clients on separate machines want to load the same html-based Scene code, but view it from different perspective ...

javascriptthree.js

Efficiently Extracting Information from JSON Objects

Currently, I am in the process of parsing a JSON file. Let's assume that the JSON data looks like this: {"data" : [ {"ID":12, country: "UK"}, {"ID":13, country: "USA"}, {"ID":14, country: "BRA"}, ]} Instead of just having three entries as show ...

javascriptjsonparsing

Refreshing the page causes the Angular/Ionic Singleton instance to be destroyed

I have a TypeScript singleton class that is responsible for storing the login credentials of a user. When I set these credentials on the login page and navigate to the next page using Angular Router.navigate (without passing any parameters), everything wor ...

javascriptangulartypescriptionic-frameworksingleton

What is the best way to utilize proxyTable for handling cross-origin requests within a vue-cli project?

I'm having trouble setting up a proxyTable with axios in my vue-cli project. In the configuration file config/index.js, I added the following code: proxyTable: { '/getnews': { target: 'https://xx.xxx.xx.x' changeOrigin: ...

vue.jswebpackvue-cli-3

Stop the form from refreshing the page after submitting a post request to the backend API

I am facing an issue with my React front end and Express back end integration. I have a form in my front end that sends data to the API using two buttons - Submit and Close. The Close button works perfectly by closing the overlay without leaving the page, ...

javascriptnode.jsreactjsapiexpress

Mixing pipe operators with Angular Observables in an array

In my project, I have an interesting scenario where I am using Observables and piping them to multiple functions as shown below. getOrders(filters: any, page: any = 1, orderBy: string = 'deliver_on', sort: string = 'asc') { const op ...

javascriptangularrxjsobservable

Issue with Jquery change event not functioning as expected

My webpage consists of the following HTML code: <form id="fileuploadform"> <input type="file" id="fileupload" name="fileupload" /> </form> Accompanied by this snippet of jQuery code: $(':file').change(function(){ var ...

javascriptjqueryhtml

Launching event handlers and applying CSS classes within a single scenario

How can I toggle the visibility of a button based on form field validation in JavaScript? I want to show or hide the button when the .confirm button is clicked, and if the form is valid, add a checkmark to the body element through event listener. The issu ...

javascriptcsseventsconditional-statements

Enable the ability to upload multiple images on a single page using droparea.js

I am currently utilizing droparea js for uploading images. However, I have encountered an issue where if I try to upload an image in one of the upload menus, it ends up changing all four upload menus simultaneously. <div class="col-md-12"> ...

javascriptjqueryhtmlcss

Creating consistently sized rows of Bootstrap columns - with either equal heights or equal spacing between each row

It would be great if bootstrap had a built-in feature where it automatically assigns the wrapper div of any item with a height based on the height of the largest div. In this example on JSFiddle, you can see that I have different heights for the video-ite ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is preventing the use of this promise syntax for sending expressions?

Typically, when using Promise syntax, the following code snippets will result in the same outcome: // This is Syntax A - it works properly getUser(id).then((user) => console.log(user) // Syntax B - also works fine getUser(id).then(console.log) However ...

javascriptnode.jsexpresspromise

Looking for a more efficient method to pass components with hooks? Look no further, as I have a solution ready for

I'm having trouble articulating this query without it becoming multiple issues, leading to closure. Here is my approach to passing components with hooks and rendering them based on user input. I've stored the components as objects in an array an ...

javascriptreactjs

What is the best way to implement authentication on a Vue component in Vue.JS 2?

My view blade appears as follows: @if (Auth::user()) <favorite :id="{{ $store->id }}"></favorite> @else <a href="{{url('/login?red='.Request::path())}}" class="btn btn-block btn-success"> <span class="fa f ...

authenticationvue.jslaravel-5.3vuejs2vue-component

Guide to modifying the root directory when deploying a Typescript cloud function from a monorepo using cloud build

Within my monorepo, I have a folder containing Typescript cloud functions that I want to deploy using GCP cloud build. Unfortunately, it appears that cloud build is unable to locate the package.json file within this specific folder. It seems to be expectin ...

javascripttypescriptnpmgoogle-cloud-functionsgoogle-cloud-build

Get a compressed folder from jszip containing a PDF file that is either empty or blank

I'm facing a challenge with my Vue app where I need to compress a group of PDF files in a folder using JSZip. While testing with just one file, the zip downloads successfully but when I try to open the PDF file inside it, the content appears blank. I ...

javascriptvue.jsjszip

Having trouble with the full-screen feature not functioning properly?

I am currently in the process of creating a custom video player and I need to include a full-screen button. However, when I click on it, the video does not expand to fill up the entire screen. I am using javascript, css3, and html5 for this project. Any as ...

javascripthtmlcss

When manipulating an array in JavaScript, the final count is wrong and there is an unexpected object

When I click this button, the addToCart function is invoked which dispatches an action to the reducer to add an item to the cart. The goal is to store only one instance of a specific item and increment the amount if the same item is added again. case &apo ...

javascriptarraysreactjsjson

Element not recognized: <my-company-form-extra> - have you properly registered this component?

I've been attempting to render a component using the is directive <template> <div> <v-tabs v-model="currentTab" fixed-tabs> <v-tab v-for="(item, i) in tabItems" :key="i">{{ item }} < ...

typescriptvue.jsnuxt.jsdirective

jQuery triggers change event twice when radio group is manually modified

After selecting "A&L" in the dropdown menu, the radio group is hidden and its value is changed to "n". I attempted to trigger the change event to make the "Hello" message disappear as well, but it seems to be executing twice - once correctly and then ...

javascriptjquery