Vuejs: How can I pass vue js prop value to attribute of html as a value?

Question

I want to show a counter on remaining time in vuejs. I am using flip-countdown library of vue. I want to pass remaining_time prop value to attribute of 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 want to pass this remaining_time above to the html attribute as value but this code is not working. Please guide how to pass remaining_time value to above attribute deadline in html.

Answer 1

Right,

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

is correct answer.

Please be sure your are using right format for date-time YYYY-MM-DD HH:mm:ss

Here is an example https://github.com/philipjkim/vue2-flip-countdown/blob/master/demo/src/App.vue