如何顯示從vue javascript到html的數據

Question

我在 Vue 框架中使用 javascript 編寫了幾行代碼。 我無法從 var 顯示 html 上的日期。 我將 vue-bootstrap 用於 styles。 任何建議是應用程序？

<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>

Answer 1

正如@Phil 所說，因為您使用的是 Vue，所以您應該像這樣定義日期的 data 屬性：

data() {
  return {
    myDate: null
  }
}

當涉及到日期選擇器時，通常是@change event 或v-model 。

嘗試：

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

然后在 HTML 模板中顯示該屬性，如：

{{myDate}}

另一種可能性是使用vue-bootstrap ，如果這不是您已經安裝的。 你會這樣做：

npm install vue-bootstrap-datetimepicker --save

然后在你的組件中

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

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

然后在你的數據中

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

並在您的 HTML 模板中

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

並顯示該日期，您將再次使用：

{{myDate}}

請參閱文檔以獲取更多詳細信息。

我希望它有所幫助。 祝你好運。

Answer 2

您應該使用 data 屬性而不是操作 dom

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

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;
      }

在 html 中，使用 vue-event handler

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

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

希望這會有所幫助:)