如何在livewire /al菠萝in应用程序中使比目鱼数据报警器反应？

Question

在我的laravel 7 /livewire 1.3 /al菠萝ok 2项目中，我从https://flatpickr.js.org数据报考器中添加了平板拾取器，运行正常，但是反应性不起作用。在下面的代码中，组件中的$current_operation_date -公共变量被修改了，确定了，但是在选择数据交换值时，高寒变量operation_date没有被更改：

<div>        
    $current_operation_date::{{$current_operation_date}}<BR>
    operation_date::<div x-html="operation_date"></div>
    <!-- The line above is not modified when in datepicker value is selected -->

    <div x-data="{ operation_date: '{{$current_operation_date}}'}">
        <input
            type='text'
            id="flatpickr_operation_date"
            wire:model.lazy="current_operation_date"

            x-model="operation_date"
            x-on:blur="$dispatch('input', operation_date)"
            class="form-control editable_field"
        />
    </div>

</div>


@section('scripts')
    <script>


        $(document).ready(function(){

            var fp = flatpickr(document.querySelector('#flatpickr_operation_date'), {
                enableTime: false,
                dateFormat: 'Y-m-d',
                altFormat: "F j, Y",
                altInput: true,
                inline: false,
                locale: "es",
                "minDate": "2020-7-12",
                "maxDate": "2020-9-12",
                defaultDate: ["2020-9-10"],
                onChange: function(selectedDates, dateStr, instance) {
                    console.log('selectedDates::')
                    console.log(selectedDates) //valid
                    
                    console.log('date: ', dateStr);
                }
            });

        });
    
    
    
    </script>
@endsection

<style>
   ...

如果有什么办法让它成为被动的？

谢谢!

Answer 1

使用Livewire2.7、高山3.4和Laravel 8的TALL堆栈--这是我目前的解决方案

components/inputs/date.blade.php

@props(['options' => []])

@php
    $options = array_merge([
                    'dateFormat' => 'Y-m-d',
                    'enableTime' => false,
                    'altFormat' =>  'j F Y',
                    'altInput' => true
                    ], $options);
@endphp

<div wire:ignore>
    <input
       x-data="{
           init() {
               flatpickr(this.$refs.input, {{json_encode((object)$options)}});
           }
        }"
        x-ref="input"
        type="text"
        {{ $attributes->merge(['class' => 'form-input w-full rounded-md shadow-sm']) }}
    />
</div>

然后我就这样用它：

<x-inputs.date id="flatpickr_operation_date" wire:model="current_operation_date" />

双向

更深入地说，当我们想动态地更改Livewire组件中的日期，并且希望在比例器中更新日期时，下面是我的当前解决方案

这是我目前的解决方案

@props(['options' => []])

@php
    $options = array_merge([
                    'dateFormat' => 'Y-m-d',
                    'enableTime' => false,
                    'altFormat' =>  'j F Y',
                    'altInput' => true
                    ], $options);
@endphp

<div wire:ignore>
    <input
        x-data="{
             value: @entangle($attributes->wire('model')), 
             instance: undefined,
             init() {
                 $watch('value', value => this.instance.setDate(value, false));
                 this.instance = flatpickr(this.$refs.input, {{ json_encode((object)$options) }});
             }
        }"
        x-ref="input"
        x-bind:value="value"
        type="text"
        {{ $attributes->merge(['class' => 'form-input w-full rounded-md shadow-sm']) }}
    />
</div>