Question

我有一个带有两个输入文本字段和日期字段的表单（父）组件，为此使用了vuejs-datepicker组件（子组件。请参见下文：

表单组件

Public Sub ImportEmails()

' Set up Outlook objects.
Dim ol As New Outlook.Application
Dim of As Outlook.MAPIFolder
Dim objItems As Outlook.Items
Dim mo As Outlook.MailItem, Atmt As Outlook.Attachment
'Set of = ol.GetNamespace("Mapi").GetDefaultFolder(olFolderInbox).Folders("Repairs")
Set of = ol.GetNamespace("Mapi").GetDefaultFolder(olFolderInbox)
Set objItems = of.Items

Dim rst As DAO.Recordset
Set rst = CurrentDb.OpenRecordset("MyInbox")

For Each mo In objItems

    'CurrentDb.Execute "INSERT INTO MyInbox SELECT '" & mo.SenderEmailAddress & "' AS Sender, '" & _
        mo.SenderName & "' AS SenderName, '" & mo.Subject & "' AS Subject, '" & _
        mo.body & "' AS Body, #" & mo.ReceivedTime & "# AS Received"

    rst.AddNew
    rst!EmailAdd = mo.SenderEmailAddress
    rst!SenderName = mo.Sender
    rst!Subject = mo.Subject
    rst!body = mo.body
    rst!Received = mo.ReceivedTime
    rst.Update
    'For Each Atmt In mo.Attachments
    '    Atmt.SaveAsFile "C:\path\" & Atmt.FileName
    'Next

Next
End Sub

日历组件

<template>
<div>
    <form>
        Name<input type="text" v-model="name"/><br>
        Age <input type="text" v-model="age"/><br>
        <calendar2 @wybrano="zm($event)"></calendar2>
        <button type="button" @click="sendfo()">Wyslij</button>
    </form>
</div>
</template>

<script>
export default {

    data() {
        return {
            name:"",
            age:"",  
            da:""
        }
    },
    created() {


    },
    methods: {
        zm: function(ev) {
            this.da=ev
        },

        sendfo: function() {
            var t = this
            axios({
                method:"POST",
                url: "sendfo",
                data: {
                    name:"messi",
                    age:32,
                    data:t.da

                },
            }).then(function(response) {
                console.log('done');
            })



        }

    }
}
</script>

我的目的是使用表单组件来收集表单数据并将其通过ajax发送到数据库。如您在代码中看到的，我使用<template> <div> <datepicker v-model="data" name="data" :format="ff" :monday- first="mondayFirst" :clear-button="clearButton" :calendar- button="calendarButton" @selected="sel"></datepicker> </div> </template> <script> import Datepicker from 'vuejs-datepicker'; export default { components: { Datepicker }, created() { }, data() { return { data: "", mondayFirst: true, clearButton: true, calendarButton: true, } }, methods: { sel: function() { if(this.data){ this.data=this.data.toISOString().substr(0,10) this.$emit('wybrano', this.data) } }, } } </script>将数据从日历组件传输到父组件。一切工作正常，但是...日历组件中的（由用户选择）日期与转移到父组件中的日期不同。我举几个例子；

$emit

我希望我的问题是可以理解的。每次父组件中的var date selected in calendar 07/08/2018 -> var data="07/08/2018" -> var da="" date selected in calendar 09/12/2018 -> var data="09/12/2018" -> var da="07/08/2018" date selected in calendar 01/01/2018 -> var data="01/01/2018" -> var da="09/12/2018"都从先前选择中获取值。请帮助我解决问题。

Answer 1

我要尝试的第一件事是更改这两行，以免更改绑定的模型值：

var payload=this.data.toISOString().substr(0,10)
this.$emit('wybrano', payload)

Answer 2

此问题是由于在 data 属性更新之前传播了 selected 事件（因此导致发出了先前的选定值）。

>

为确保在选定日期更新后传播该日期，您可以改用watcher方法观察data属性的变化。

然后，在watcher方法中，您将像已经完成的那样发出事件。

因此，在 /// Calendar 组件中，您将具有类似以下内容，其中@selected被删除了：

<datepicker v-model="data" name="data" :format="ff" :monday- 
  first="mondayFirst" :clear-button="clearButton" :calendar- 
  button="calendarButton"></datepicker>
///
 methods: {
   ...
   watch: {
     'data' () {
       this.$emit('wybrano', this.data.toISOString().substr(0,10))
     }
   }

然后，我建议您使用有意义的函数，变量名，以简化代码的可读性和维护。

例如，您可以将 Calendar data 重命名为 someDate （需要澄清一些内容）。名为 wybrano 的事件将重命名为* someDateUpdated。 zm 函数名称也不清楚。

Answer 3

您可以尝试在日历组件上使用v-model。

通过这种方法，VueJS将对选择日期具有良好的反应性。

文档：Using v-model on Components

///表单组件

...
<calendar2 v-model="da" />
...

///日历组件

... in the template
<datepicker v-model="value" input="$emit('input', $event.target.value.toISOString().substr(0,10))" ... />
...

... in the script
data() { /* datepicker configuration */ },
props: ['value'],
...

Answer 4

也许更改这一行就足够了：

this.$emit('wybrano', this.data)

像这样：

this.$nextTick(this.$emit('wybrano', this.data))

将数据从子组件传输到父组件

4 个答案: