带实心线的数位机如何求值

Question

我怎样才能在直播线中得到nouislider的值？这样我就可以比较最低和最高价格了。我不知道我怎么能得到这些价值。它有两个处理，一分钟和最高价格。

         <div wire:ignore id="slider-margin"></div>
                        <div class="d-flex">

                            <div wire:model="min_price" class="me-5" id="slider-margin-value-min" aria-valuenow="min_price"></div>
                            <div wire:model="max_price" id="slider-margin-value-max" aria-valuemax="max_price"></div>

                        </div>

class Shop extends Component
{
use WithPagination;
protected $paginationTheme = 'bootstrap';
public $min_price;
public $max_price;

public function render()
    {
 $this->products = Product::query()
 ->wherebetween('price',[$this->min_price,$this->max_price])->paginate(9);

        return view('livewire.shop',[
            'products'=>$this->products
        ]);
    }
}

Answer 1

试试下面的代码：

<div wire:ignore id="slider-margin"></div>
<div class="d-flex">

    <div wire:click="setMin({{ $min_price }})" class="me-5" id="slider-margin-value-min" aria-valuenow="min_price"></div>
    <div wire:click="setMax({{ $max_price }})" id="slider-margin-value-max" aria-valuemax="max_price"></div>
</div>

以及：

class Shop extends Component
{
    use WithPagination;
    protected $paginationTheme = 'bootstrap';
    public $min_price;
    public $max_price;

    public function setMax($max_price)
    {
        $this->max_price= $max_price;
    }

    public function setMin($min_price)
    {
        $this->min_price = $min_price;
    }

    public function mount()
    {
        $this->products = Product::query()
            ->wherebetween('price',[$this->min_price,$this->max_price])->paginate(9);
    }
}

Answer 2

div不是输入，所以wire:model不会对它做任何事情。noUiSlider在页面加载后生成HTML，因此为了能够将其用于Livewire中的变量，您必须使用JavaScript。您可以侦听事件并使用全局Livewire JS对象对组件进行更改。

因此，有一个例子可以说明这是如何工作的：

let slider = document.getElementById('slider-margin');

slider.noUiSlider.on('update', function (values) {
    Livewire.emitTo('shop', 'sliderUpdated', values);
});

然后，在组件中，可以使用传递的值执行一些操作：

function sliderUpdated(array $values) 
{
   $this->min_price = \Illuminate\Support\Arr::first($values);
}

确保对事件文档进行良好的阅读，因为我不能100%肯定上面的代码会立即运行，但我认为这至少会让你朝着正确的方向前进！