0

我使用的日期选择器有点类似于这个例子

文件：datepicker.vue

<template>
  <v-menu
    v-model="dateMenu"
    :close-on-content-click="false"
    :nudge-right="40"
    :return-value.sync="dateValue"
    transition="scale-transition"
    offset-y
  >
    <template v-slot:activator="{ on }">
      <v-text-field
        :label="dateLabel"
        prepend-icon="fa-calendar"
        readonly
        v-model="dateValue"
        v-on="on"
        clearable
      ></v-text-field>
    </template>
    <v-date-picker
      locale="en-in"
      v-model="dateValue"
      no-title
      @input="dateMenu = false"
    >
      <v-spacer></v-spacer>
      <v-btn 
        text 
        color="primary" 
        @click="dateMenu = false"
        >Cancel</v-btn>
      <v-btn 
        text 
        color="primary" 
        @click="$refs.dialog.save(dateValue)"
        >OK</v-btn> 
   
    </v-date-picker>
  </v-menu>
</template>
<script>
  export default {
    props: ['dateLabel','dateModel'],
    data() {
      return {
        dateMenu: false,
        dateValue: this.dateModel,
      };
    },
    watch: {
      dateValue(){
        $nuxt.$emit('update',this.dateValue);
      }
    },
  };
</script>

文件：projects-subform.vue

...
<DatePicker 
          dateLabel="Project Start Date" 
          :dateModel="project.start_date"
          @update="(v) => (project.start_date = v)"/>
...

（我将 DatePicker 作为项目表单中的一个组件导出。）

当我从选择器 UI 中选择日期时，v-text-field 上的显示文本不会反映所选日期。此外，在我从日期选择器中选择日期后，模型 project.start_date 似乎没有更新。当这样的事件错误没有出现在开发工具控制台上时，调试变得非常棘手。

状态未修改：开发工具

4

1 回答 1

0

首先，不建议直接更改作为 prop 传入的模型。我们不希望父组件中出现任何不需要的中断。依靠事件。不知何故，即使是这种传球方式对我来说也不是很好。

我做了一些这样的解决方法。（我知道这是一种非常肮脏的方式）。但是由于某种原因，在父组件中无法检测到带有输入/更新/更改的 $emit。我很确定有更好的方法来做到这一点。但就目前而言，继续生活。:-(

文件：datepicker.vue

<template>
...
<v-date-picker
      locale="en-in"
      v-model="dateValue"
      no-title
      @input="dateMenu = false;"
      @change="saveDate" //change here
    >
    </v-date-picker>
...
</template>
<script>
...
methods(){
  saveDate(val){
    this.dateValue = val;
    //changed here...emitting a custom event. 
    $nuxt.$emit("datePicked",{
          project_number:this.project_number, 
          selectedDate: selDateVal
          });
    this.$refs.dateMenu.save(selDateVal);      
  }
...
</script>

文件：project-subform.vue

...
<script>
...
created:{
 this.$nuxt.$on('datePicked',this.updateDate);
}
...
methods:{
  updateDate(v){
    //do my stuff
    this.projects[v.project_number].startDate = v.selectedDate
  }
}
</script>
于 2021-09-16T17:13:36.457 回答