How do I pass a value from a Vue component's prop to an HTML attribute in Vue.js?

I am seeking assistance with displaying a countdown timer in Vue.js using the flip-countdown library. My goal is to pass the value of the 'remaining_time' prop as an attribute in the HTML code.

HTML:

<flip-countdown deadline=remaining_time></flip-countdown>

Script:

<script>
import FlipCountdown from 'vue2-flip-countdown'
    export default {
        components: { FlipCountdown },
        props: ['id'],

        data(){
            return {
                 items:{},

                 remaining_time:"2019-12-25 00:00:00",
            }
        },
</script>

I am encountering difficulties passing the 'remaining_time' value above to the HTML attribute as its value. Any guidance on how I can successfully pass the remaining_time value to the 'deadline' attribute in the HTML would be greatly appreciated.

Answer №2

Ensure that you connect it to the specific attribute:

<flip-countdown v-bind:deadline="remaining_time"></flip-countdown>

Alternatively, you can use:

<flip-countdown :deadline="remaining_time"></flip-countdown>

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

Issues with Angular updating the *ngFor Loop

I'm looking to showcase a lineup of upcoming concerts in my HTML, sourced from a web API (which is functioning correctly). The API is encapsulated within a ConcertService: @Injectable({ providedIn: 'root' }) export class ConcertService { ...

Adjust an OnDemandGrid utilizing dstore/Rest output through a POST request instead of a PUT request

I am facing a perplexing issue. I have an OnDemandGrid that is editable, and below it, I have a dstore/Rest collection connected to my backend (using PHP). While I can edit the data in the OnDemandGrid, I am unable to save it properly. When it reaches the ...

Tips for disabling multiple clicks on a submit button within a form using VUEJS

Is there a way to prevent users from clicking on the submit button multiple times in the code snippet provided below? Snippet from the template: <form @submit.prevent="onSubmit"> <b-button v-on:click="disable" variant=" ...

Use Ramda to convert an array of objects into nested objects

As a beginner, please forgive me for asking what may be considered a naive question. I currently have an array of objects const arr = [{id: 1, name: 'Pete'}, {id: 5, name: 'John'}, {id: 3, name: 'Peter'}] and I am looking to ...

Imitate a hover effect followed by a click to activate the pre-established onclick function

When using Gmail, selecting a message will prompt a bar to appear at the top of the messages table. This bar allows for mass actions to be performed on the selected messages (refer to the GIF photo attached). https://i.stack.imgur.com/XxVfz.gif I have be ...

To trigger a method in a VueJS parent component, one can utilize event listening

In my VueJS 2 project, there are a parent component and a child component. The parent component sends a property named items to the child component. Whenever the user clicks on a button within the child component, it emits a refresh event using this synta ...

Unable to locate the MoreVert icon in Material UI interface

I am trying to incorporate the MoreVert icon into my application's header to display signout and settings options. I have added the MoreVert icon as shown below, and although the popup appears when clicking on the supposed location of the icon, I am u ...

Send a Javascript variable to a Python controller using AJAX

Programming is still new to me and I find myself in unfamiliar territory... I am working on creating an app that relies on button clicks to gather information and provide data analysis based on those interactions. While this functionality works using pure ...

Valid method of confirming a user's login status

Using AJAX requests, I have implemented a user area on my website. The "Log off" button is supposed to be displayed only when the user is logged in. Here is the AJAX request for logging in a user: function requestSI() { var xhr = getXMLHttpRequest(); xhr ...

Is there a way to load information retrieved from an API into a dropdown menu in Laravel with the help of VueJS and axios?

After many attempts, I still can't seem to fetch my API data into a select list successfully. Everything seems to be retrieved properly, but when it comes to displaying them, nothing shows up. Could there be an issue with my code? Here's my rout ...

Having difficulties integrating a login solution due to an error saying "eslint Promise executor functions should not be async no-async-promise-executor"

I'm currently working on integrating a login solution into my Vue app using the JWT Authentication plugin. While I have a test solution that is functional, I'm facing an issue in my main branch where the eslint version seems to be causing an err ...

Improving efficiency for handling a vast number of inputs in React applications

Dealing specifically with Material UI, I am faced with the challenge of rendering a large number of inputs (more than 100) while effectively managing global state. Performance issues arise when using the Material UI <TextField /> component, with noti ...

The effectiveness of mouseup and mousemove events diminishes when employed in an external module

Currently, I am immersed in a three.js project that incorporates standard orbit controls on an object, specifically a particle cloud. Everything runs smoothly when this logic is embedded within my root class along with all the three.js code. However, my go ...

Adjust the size of two divs in AngularJs as needed

I have two divs covering the entire page, each at 50% width. When the lower div is clicked, I want it to expand to cover the full screen, and return to its original size on click again. Here is an example: See JQuery equivalent $('.wrapper div.green ...

The JSON request was unsuccessful in sending the JSON object to PHP, resulting in an empty var_dump

I am encountering an issue where my $_POST array in PHP is empty when I try to pass a JSON object with an AJAX request on my JavaScript page. Here is the JavaScript code: function send(cat, subcat) { var type = cat.options[cat.selectedIndex].text ...

In a jQuery conditional statement, selecting the second child of the li element for targeting

I'm encountering an issue where I can't target the second child of an li element and use it in a conditional statement. Are jQuery conditionals not compatible with li:nth-child(2)? if($(".steps ul li:first-child").attr('aria-selected') ...

Why is it difficult to parse out a single object using jQuery .each, while multiple objects work perfectly?

Currently, I am dealing with a .each loop that processes an object retrieved from a JSON feed through Ajax (Type: jsonp; the success function sends the "data" to the function/method containing the .each loop). The issue puzzling me is that when the feed r ...

What is the maximum level of referencing allowed in v-if conditions?

I'm encountering an issue with some markup I have: <div class="form-group" v-if="model.owner.enabled"> The model object in the scope is structured like this: { ... owner: { enabled: true ... } ... } However, Vue is th ...

The premature reveal of the back side in the Kendo UI flip effect on Internet Explorer

Currently, I am in the process of creating a BI dashboard for a business application using JavaScript Kendo UI version v2014.1.416. Unfortunately, I have encountered an issue with certain visuals while testing on IE11. I must mention that due to practical ...

the process of altering properties in vue js

After running my Vue file, I encountered the following console error. As someone new to Vue programming, I'm attempting to utilize a Syncfusion UI component to display a grid. Prop being mutated: "hierarchyPrintMode" I am unsure where to add the comp ...