Реализация Blazor Bootstrap Vue B-Checkbox с моделью массива - PullRequest
Новая
       10

Реализация Blazor Bootstrap Vue B-Checkbox с моделью массива

0 голосов
/ 24 апреля 2020

Я пытаюсь придумать реализацию Blazor с использованием модели типа массива с несколькими флажками.

Vue компонент: 

<template>
  <div>
    <b-form-group label="Using sub-components:">
      <b-form-checkbox-group id="checkbox-group-2" v-model="selected" name="flavour-2">
        <b-form-checkbox value="orange">Orange</b-form-checkbox>
        <b-form-checkbox value="apple">Apple</b-form-checkbox>
        <b-form-checkbox value="pineapple">Pineapple</b-form-checkbox>
        <b-form-checkbox value="grape">Grape</b-form-checkbox>
      </b-form-checkbox-group>
    </b-form-group>
    <div>Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: [], // Must be an array reference!
      }
    }
  }
</script>

компонент Blazor: 

<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="@id" name="@name" @onchange="@((ChangeEventArgs) => CheckedChanged(ChangeEventArgs, value))">
    <label class="custom-control-label" for="@id">@label</label>
</div>

@code {
    [Parameter]
    public string id { get; set; }
    [Parameter]
    public string name { get; set; }
    [Parameter]
    public object value { get; set; }
    [Parameter]
    public List<object> model { get; set; }
    [Parameter]
    public EventCallback<List<object>> modelChanged { get; set; }
    [Parameter]
    public string label { get; set; }

    protected override void OnInitialized()
    {
        base.OnInitialized();
    }

    protected void CheckedChanged(ChangeEventArgs args, object value)
    {
        if(!model.Any(i => i == value))
        {
            model.Add(value);
        }
        else
        {
            model.Remove(value);
        }
    }
}

Использование: 

@foreach (string timezone in DistinctTimezones)
{
    <BCheckbox @bind-model="@FilterTimezones" value="@timezone" label="@timezone" id="@(string.Format("timezone_{0}", timezone))" name="@(string.Format("timezone_{0}", timezone))" />
}

<p>Selected:</p>
@foreach(var timezone in FilterTimezones)
{
    @timezone
}

@code {
    protected List<string> DistinctTimezones { get; set; } = new List<string>{"Central", "Eastern"};
    protected List<object> FilterTimezones { get; set; } = new List<object>();
}

Когда я проверяю флажки, объект FilterTimezone не обновляется со значениями из отмеченных флажков. Это уже возможно, и я это слишком усложняю? Мне известно только о привязке значений к типу, не относящемуся к коллекции.

1 Ответ

0 голосов
/ 24 апреля 2020

Я бы сделал это так (строка здесь просто для упрощения, чтобы понять идею) CollectionCheckBox.razor 

<input type="checkbox" @bind=isChecked />

@code
{
    [Parameter]
    public string Value { get; set; }

    [Parameter]
    public List<string> Model {get; set;}

    private bool isChecked
    {
         get => Model.Any(el => el == Value);
         set
         {
              if(value)
              {
                   if(!Model.Any(el => el == Value) Model.Add(Value);
              }
              else
                  Model.Remove(Value); 
         }
    }
}

Тогда в родительском компоненте вы просто делаете 

<CollectionCheckBox Model="@Model", Value="Orange" />
<CollectionCheckBox Model="@Model", Value="Apple" />
<CollectionCheckBox Model="@Model", Value="Pineapple" />
<CollectionCheckBox Model="@Model", Value="Grape" />

@code
{
    private List<string> Model = new List<string();
}
...