Question

我必须使用datepicker组件，从日期到日期。

如果日期为空，我想用起始日期更新到日期。

我已经看过对值进行发射，但觉得这不对，我不知道该怎么做

 <datepicker
      input-label="From"
      input-id="start-date"
      input-name="start_date"
      input-value="<%= group_discount.start_date %>"
      @change-date="changeDate"
      >
 </datepicker>
 <datepicker
        input-label="To"
        input-id="end-date"
        input-name="end_date"
        input-value="<%= group_discount.end_date %>">
 </datepicker>


import Vue from "vue"
import Datepicker from "../components/DatePicker"

Vue.use(Datepicker)

const initGroupDiscount = () => {
  new Vue({
  el: "#js-group-discounts",
  components: {
   Datepicker,
  },
  methods: {
   changeDate(value) {
    console.log("value")
    console.log(value)
    },
  },
 })
}

document.addEventListener("DOMContentLoaded", () => {
  initGroupDiscount()
})





    <template>
       <div >
        <label :for="this.inputId">{{ this.inputLabel }}</label>
        <input  type="text"
                class="form-control form-control-info"
                placeholder="dd/mm/yyyy"
                :name="this.inputName"
                :id="this.inputId"
                pattern="\d{1,2}/\d{1,2}/\d{4}"
                required
                v-model="isInput"
                v-on:keyup="updateCalendar($event)"
                ref="dateinput"
                @blur="blur"
                @focus="focus">
        <datepicker format="dd/MM/yyyy"
                    input-class="form-control"
                    placeholder="dd/mm/yyyy"
                    v-model="isPicker"
                    :inline="true"
                    v-show="isOpen"
                    @mouseover.native="mouseOver"
                    @mouseleave.native="mouseLeave"
                    @selected="updateInput"></datepicker>
      </div>
    </template>

     <script>
     import Vue from "vue"
     import Datepicker from "vuejs-datepicker"
     Vue.use(Datepicker)

export default {
    name: "neptune-datepicker",
    props: {
        inputLabel: {
            type: String,
        },
        inputId: {
            type: String,
        },
        inputValue: {
            type: String,
        },
        inputName: {
            type: String,
        },
    },
    data(){
        let value = ""
        if (this.inputValue) {
            const dateParts = this.inputValue.split("-")
            value =`${dateParts[2]}/${dateParts[1]}/${dateParts[0]}`
        }

        return {
            isInput: value,
            isPicker: this.inputValue,
            isOpen: false,
        }
    },
    components: {
        Datepicker
    },
    methods: {
        updateInput(date) {
            this.isInput = date.toLocaleDateString("en-GB")
            this.$emit('changeDate', this.isInput);
        },
        updateCalendar(event) {
            const dateString = event.srcElement.value

            if (dateString.length === 10) {
                const dateParts = dateString.split("/")

                const dateObject = new Date(
                    dateParts[2],
                    dateParts[1],
                    dateParts[0],
                )

                if ((dateObject !== "Invalid Date") && !Number.isNaN(dateObject)) {
                    this.isPicker = dateObject
                }
            }
        },
        blur() {
            this.isOpen = false
        },
        focus() {
            this.$refs.dateinput.focus()
            this.isOpen = true
        },
        mouseOver() {
            this.$refs.dateinput.focus()
            this.isOpen = true
        },
        mouseLeave() {
            this.$refs.dateinput.focus()
            this.isOpen = true
        },
    },
}
</script>

它向控制台发出正确的值，但我不知道如何将其传递给组件的特定实例，即“到”日期

Answer 1

父组件应将prop传递给两个数据子组件：

<datepicker
  :myValue="myValue"
  input-label="From"
  input-id="start-date"
  input-name="start_date"
  input-value="<%= group_discount.start_date %>"
  @change-date="changeDate"
>
</datepicker>
<datepicker
    :myValue="myValue"
    input-label="To"
    input-id="end-date"
    input-name="end_date"
    input-value="<%= group_discount.end_date %>">
</datepicker>

然后，您可以在计算机或方法中使用该prop来验证它是否包含值，并覆盖to或from值。

编辑：您也可以使用您的发射策略，但仍需要将道具传递给其中一个组件，以便它可以读取数据。如果您在阅读之前从未使用道具：https://vuejs.org/v2/guide/components-props.html

如何将属性值传递给组件的实例

1 个答案: