CODEWITHSUNDEEP
javascriptvue.jsvue-component
Alex
Alex

Reputation: 5904

How to use a Vue component specified only by template?

I have a minimal Vue app:


<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
    <meta http-equiv='x-ua-compatible' content='ie=edge'>
    <!-- 1. Link Vue Javascript -->
    <script src='https://unpkg.com/vue/dist/vue.js'></script>

    <!-- 2. Link VCalendar Javascript (Plugin automatically installed) -->
    <script src='https://unpkg.com/v-calendar'></script>
    <!--3. Create the Vue instance-->
    <script>
        window.onload = function(){            
            new Vue({
                el: '#app',
                data: {                    
                },
                template: ''
            })
        }
      </script>
  </head>
  <body>
    <div id='app'>
    </div>
  </body>
</html>

and I want to show the date picker from https://vcalendar.io/examples/datepickers.html#button-dropdown but is only specified as template.

What are the steps to display that date picker inside my application?

Upvotes: 0

Views: 107

Answers (1)

Michal Lev&#253;
Michal Lev&#253;

Reputation: 37933

new Vue({
  el: '#app',
  data: () => ({
    selectedDate: null
  }),
  template: `
  <div>    
    <v-date-picker class="inline-block" v-model="selectedDate">
    <template v-slot="{ inputValue, togglePopover }">
      <div class="flex items-center">
        <button @click="togglePopover()">
          Pick date
        </button>
        <input
          :value="inputValue"          
          readonly
        />
      </div>
    </template>
  </v-date-picker>
  </div>
  `
})
<!-- 1. Link Vue Javascript -->
<script src='https://unpkg.com/vue/dist/vue.js'></script>
<!-- 2. Link VCalendar Javascript (Plugin automatically installed) -->
<script src='https://unpkg.com/v-calendar'></script>

<div id='app'>
</div>

Upvotes: 1

Related Questions