MudChip two way binding in MudBlazor?

Viewed 875

I'm using MudBlazor with Blazor Server side and I'm trying to double-bind a MudChip. I want to save the chip that is selected in a database and retrieve the data at a later point and prerender the chip as selected. Basically to do a double binding on the chip. It does no seems to work, what I have tried:

  1. Create a new chip in OnInitialized method and set the properties (Text, Color, IsSelected) on the SelectedChip property:

<MudContainer>
                  <MudText Style="display:inline;color:white">Goal Type</MudText>
                  <MudChipSet @bind-SelectedChip="md"  Style="display:inline;" Filter="true">
                      <MudChip  Text="Financial" Color="Color.Dark">Financial</MudChip>
                      <MudChip Text="Personal" Color="Color.Dark">Personal</MudChip>
                  </MudChipSet>
</MudContainer>

This is the code:

MudChip md;

  protected override void OnInitialized()
  {
        Init();
  }

  public void Init()
  {
        if (md == null)
        {
            md = new MudChip { Color = Color.Dark, Text = "Financial", IsSelected = true };
        }
  }
  1. Create a reference to the selected chip:

<MudChipSet @bind-SelectedChip="md" @onselect="OnSelect" Style="display:inline;" Filter="true">
                        <MudChip Text="Financial" Color="Color.Dark">Financial</MudChip>
                        <MudChip @ref="personal" Text="Personal" Color="Color.Dark">Personal</MudChip>
     </MudChipSet>

This is the code:

MudChip md;
 MudChip personal;

 protected override void OnInitialized()
 {
        if(md is null)
        {
            md = personal;
        }
 }

None of this methods worked, do you have any idea if double binding is even possible ? I also asked on the GitHub page and one of the contributors said that is possible, by using the provided examples. For me they weren't of much help. This is the GitHub question:

https://github.com/Garderoben/MudBlazor/discussions/1791

1 Answers

OnInitialized is fired before the first render, so personal will still be null when you set md=personal.

Move that code to OnAfterRender(bool firstRender) when firstRender is true

Related