Utilizing Vue to connect data to Bootstrap-Vue card properties

Recently transitioned from backend development to frontend. Currently delving into the world of Vue and Bootstrap Vue.

One of the challenges I am facing is dynamically populating the bootstrap card attributes such as the title. While I have the necessary data available on the JS side, I have tried using moustache syntax and v-binding without success. Any advice or pointers on how to achieve this would be greatly appreciated.

        <b-card
              title="{{testTitle}}"
              img-src="https://picsum.photos/600/300/?image=25"
              img-alt="Image"
              img-top
              tag="article"
              style="max-width: 20rem;"
              class="mb-2">
        <b-card-text>
          Blah blah
        </b-card-text>
        <b-button href="#" variant="primary">Go somewhere</b-button>
      </b-card>
javascriptvue.jsbootstrap-4

Answer №1

The use of mustache syntax is not applicable to HTML attributes, as explained here. The correct approach is to utilize v-bind, which enables the attributes to be reactive.

To bind title to the value of testTitle, you would do something similar to this:

<b-card
    v-bind:title="testTitle"
    img-src="https://picsum.photos/600/300/?image=25"
    img-alt="Image"
    img-top
    tag="article"
    style="max-width: 20rem;"
    class="mb-2"
>

Alternatively, you can use the shorthand notation and skip the v-bind like this:

<b-card
    :title="testTitle"
    img-src="https://picsum.photos/600/300/?image=25"
    img-alt="Image"
    img-top
    tag="article"
    style="max-width: 20rem;"
    class="mb-2"
>

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

mootools.floor dispose function malfunctioned

I am attempting to implement form validation with the following code: However, it does not seem to be working properly. <form name="niceform" id="third" action="" class="niceform" method="post" enctype="multipart/form-data"> <div class ...

javascriptmootoolsfloor

An error occurred in the defer callback: The specified template "wiki" does not exist

I recently developed a Meteor package called Wiki. Within the package, I included a wiki.html file that contains: <template name="wiki"> FULL WIKI UI CODE HERE </template> Next, I created a wiki.js file where I defined my collections and eve ...

javascriptmeteor

Distinguishing between a regular JavaScript variable and one annotated with a dollar sign

Many responses have addressed the question of using a dollar sign in JavaScript variables. In essence, the dollar sign functions as an identifier in JavaScript variables. However, I am curious if there are other distinctions between regular variables and ...

javascript

What are the steps for integrating an external API into a React project?

Apologies for any potential repetition, as this question may be commonly asked. I am currently working with React, Express, CORS, node, and postgres databases. My objective is to utilize the following API to retrieve real-time prices for metals: https://me ...

javascriptnode.jsrestexpresscors

The "Read more" feature is not functional on mobile devices

I am encountering issues with my Wordpress blog on mobile screens. The "read more" button is not functioning, and the screen size does not fit properly on mobile devices. Visit abood250.com for more information. CSS Styling: /* =Global ----------------- ...

javascriptjqueryhtmlcsswordpress

The absence of transpiled Typescript code "*.js" in imports

Here is an example of the code I am working with: User.ts ... import { UserFavoriteRoom } from "./UserFavoriteRoom.js"; import { Room } from "./Room.js"; import { Reservation } from "./Reservation.js"; import { Message } from ...

javascriptnode.jstypescriptecmascript-2020

Having trouble with accessing PHP data through jQuery's AJAX response

Having just started exploring AJAX, I'm facing an issue with a simple login script using jQuery 1.6.4. The AJAX function sends the email address and password to 'login.php' upon clicking a button. Everything seems to be working smoothly unti ...

phpjavascriptjqueryajax

The keyDown function in P5.play.js does not seem to be working properly

Can someone please help me figure out why this code isn't functioning properly? I am utilizing p5 libraries such as p5.play, p5.js, p5.sound, and p5dom. Here's the snippet: class Player{ constructor(){ this.x, this.y, this.width, ...

javascripthtml

I encounter issues with my fetch request as it is denied while attempting to access the HTML content from the specified

I'm currently working on a project in my express app where I need to retrieve the html code of multiple urls. However, I keep encountering this error: reject(`new FetchError(request to ${request.url}` failed, reason: ${err.message}, 'system' ...

javascriptnode.jsexpressfetch

What is the best way to generate hyperlinks from data in a MongoDB database?

Looking for some assistance in setting up an online discussion forum using node.js, express & mongodb. My current challenge is creating clickable links that will redirect me to the specific page of each article stored in the database. I need to figure out ...

javascriptnode.jsmongodbexpressejs

Tips for transferring v-model to a child element along with the change event

In my Vue2 project with Vuetify, I am working on implementing filters to hide certain games when specific filters are turned off. Everything functions correctly until I attempt to move the filters into a separate component. The goal is to make these filt ...

vue.jsvuejs2

Implementing a constant loop repeatedly in NextJs

I am seeking assistance with printing the <Icon /> 700 times on a single page. As a newcomer to NextJs, I have successfully used a for loop to console.log the icons but am unsure of how to actually display them. Any help would be greatly appreciated. ...

javascriptreactjsloopsfor-loopnext.js

Tips for sending multiple pieces of data to an Arduino with NodeJS's serialport library

I am having trouble writing multiple data using the same port, but I see that node-serialport allows for reading multiple data functions simultaneously. How can I also write multiple data at the same time? This is how I have attempted it: - index.js- con ...

javascriptnode.jsarduinoserial-portnode-serialport

Error: The script "build" is not defined in the

Encountering an error when running the command npm run build npm ERR! missing script: build After adding a build script in the package.json file: "scripts": { "dev": "npm run development", "development": "cross-env NODE_ENV=development n ...

laravelvue.jsnpm

Creating truly dynamic components in VueJS without any fixed code involved

Hey there! I'm fairly new to vuejs and currently working on a project that involves pulling data from a RestAPI. My goal is to create dynamic components without any hard-coding, using the id provided by the API to display the contents accordingly. Ta ...

vue.jsdynamiccomponents

Manipulate the inner HTML of a ul element by targeting its li and a child elements using JQuery

Here is the HTML code I am working with: <ul class="links main-menu"> <li class="menu-385 active-trail first active"><a class="active" title="" href="/caribootrunk/">HOME</a></li> <li class="menu-386 active"> ...

javascriptjquery

Implementing HTML page authentication with Identity ADFS URL through JavaScript

I have a basic HTML page that displays customer reports using a JavaScript function. The JavaScript makes an ajax call to retrieve the reports from a backend Spring REST API. In the Spring REST API, I have set up an endpoint "/api/saml" for authentication ...

javascripthtmljqueryjquery-pluginsadfs

Error: React - Module not found. This issue arises when attempting to require the 'express' package from within the installed

Hello, I attempted to install the express package in a React project. However, when I try to import the package inside app.js using: const app = require("express"); I encounter 30 errors all stating: Module not found Error: Can't resolve 'x&ap ...

javascriptnode.jsreactjsexpressnpm-install

Broaden the natural interface for the element

I'm looking to create a uniquely customized button in React using TypeScript. Essentially, I want to build upon the existing properties of the <button> tag. Below is a simplified version of what I have so far: export default class Button extend ...

javascripttypescript

Flexbox or Bootstrap 4 Grid: Which is the Better Choice?

My form is structured as follows: <div class="row"> <div class="col"> <textarea name="comment" class='form-control' placeholder='Type new comment here..'></textarea> </div> <div clas ...

htmlcsstwitter-bootstrapbootstrap-4