CODEWITHSUNDEEP
javascripthtmlvue.js
sahith gangarapu
sahith gangarapu

Reputation: 15

How to display data from vue javascript to html

I have written few lines of code using javascript in Vue framework. I can not display date on html from var. I used vue-bootstrap for styles. Any suggestion is app?

<template>
    <div class="app">
        <b-form-datepicker id="datepicker" class="weekpicker" placeholder="Select a week" local="en"></b-form-datepicker>
    <div class="w-75 p-3 mb-1 text-light">
        <b-form-select class="weekpicker" onfocus="myFunction()">
            <b-form-select-option  hidden value="">Select a week</b-form-select-option>
            <b-form-select-option  id="mydate"  value="">{{ myFunction() }}</b-form-select-option>
            <b-form-select-option  type="date"  value=""></b-form-select-option>
            <b-form-select-option  type="date"  value=""></b-form-select-option>
        </b-form-select>

    </div>
        <button><span>Submit</span></button>
    </div>
</template>


<script>


export default {
  name: 'TS_home',
  data() {
    return {
    };
  },
    methods: {
      myFunction() {
          let x = new Date();
          let current_date = x.toDateString();
          x.setDate(x.getDate() + 7);
          let seventh_date = x.toDateString()
          document.getElementById("mydate").innerHTML = current_date + " - " + seventh_date;
      }
    }
};
</script>

Upvotes: 1

Views: 2625

Answers (2)

Jakub A Suplicki
Jakub A Suplicki

Reputation: 4801

As @Phil said since you are using Vue you should define the data property for the date like so:

data() {
  return {
    myDate: null
  }
}

When it comes to date pickers it is usually @change event or v-model.

Try:

<b-form-datepicker id="datepicker" class="weekpicker" placeholder="Select a week" local="en" @change="myDate=$event"></b-form-datepicker>

Then display the property in your HTML template like:

{{myDate}}

Another possibility is to use vue-bootstrap if that is not what you have installed already. You would do it like this:

npm install vue-bootstrap-datetimepicker --save

then in your component

  // Import required dependencies 
  import 'bootstrap/dist/css/bootstrap.css';

  // Import this component
  import datePicker from 'vue-bootstrap-datetimepicker';

then in your data

data() {
  return {
    myDate: new Date(),
    options: {
      format: 'DD/MM/YYYY',
      useCurrent: false,
    }
  }
}

and in your HTML template

<date-picker v-model="myDate" :config="options"></date-picker>

and to display that date you would again use: 

{{myDate}}

Please refer to the documentation for more detailed information.

I hope it helps. Good luck.

Upvotes: 1

thealpha93
thealpha93

Reputation: 778

You should use the data property instead of manipulating the dom

data() {
  return {
    myDate: ''
  }
}

Inside the function

myFunction() {
          let x = new Date();
          let current_date = x.toDateString();
          x.setDate(x.getDate() + 7);
          let seventh_date = x.toDateString()
          this.myDate = current_date + " - " + seventh_date;
      }

In the html, use the vue-event handler

<b-form-select class="weekpicker" @focus="myFunction()">

<b-form-select-option  id="mydate"  value="">{{ myDate }}</b-form-select-option>

Hope this will help :)

Upvotes: 0

Related Questions