force the update of x-for template

[Ronan-Lenor]

Hello,

through a function i change the the attribute of a select option element to "selected"
but as the numbers of options in the collection doesn't change, i was wondering of to force its refreshng ?

    <template x-for="(option,index) in elementSelect.options;" :key="option.value">
        <template x-if="!option.selected">

P.S.: also, this should be better in another topic, but this would be great if we could cumulate x-for & x-if in the same element

[SimoTod]

There's no official way to refresh a directive. The easiest way is to reassign options after you change the select property. Something like: elementSelect.options = [...elementSelect.options]

[SimoTod]

Regarding x-if + x-for, if you add x-if to the main tag, the whole loop will be effected so the other option would be ambiguous

[Ronan-Lenor]

for some unknow reason, elementSelect.options = [...elementSelect.options] doesn't trigger any refresh.

i try to do a codepen, but i don't find how to integrate alpinejs to the javascript side:
https://codepen.io/Laynor/pen/oNGGYXG

[SimoTod]

The codepen has a few bugs. Alpine is not deferred so it runs before Alpine data is defined (you also don't need to spread alpine.data).
The default value for elSelect is null but in your html you use elSelect.options which will throw an error before x-init finishes.

In general, the state of the component should be the source of the truth and the html just a visual rappresentation. Initially I thought your elSelect was a plain object but looking at what you are trying to do, I don't think you can assign options in that way, it's probably a readonly property. Also the x-model there doesn't make much sense.

You should try to rethink the component so you have a plain object (or array) in your state and you generate both select and p list from there.

[Ronan-Lenor]

Here is what i have ended with:

https://tailwindcomponents.com/component/alpinejs-multiple-select-dropdown-with-tags-filter

[filanico]

OS: Windows 10
Browser: Firefox 5.0
Hi guys.
Had a similar problem in a "master-detail" scenario.
I needed to change the style of current selected menu so i came up to the below solution:
Hi here's my code.
JS code:

      "menu":{
        "dati_anagrafici":{"label":"I miei dati","href":"{{ route('home.account.profilo.dati') }}"},
        "ordini":{"label":"I miei ordini","href":"{{ route('home.account.profilo.ordini') }}"},
        "contatti":{"label":"I miei contatti","href":"{{ route('home.account.profilo.ordini') }}"},
        "newsletter":{"label":"I miei contatti","href":"{{ route('home.account.profilo.ordini') }}"},
        "resi":{"label":"I miei contatti","href":"{{ route('home.account.profilo.ordini') }}"},
      },
      "mainContent":"Attendere...",
      "currentMenu":"ordini",
      "currentMenuStyle":"active",
      "_":"foo"  // <----- 
    };
function init(){
      select_menu = select_menu.bind(this);
      select_menu("ordini");
    }
function select_menu(menu){
      this.currentMenu = menu;
      this._=(new Date()).getTime();
}

HTML code:

<div class="grid grid-cols-12 " x-data="sidemenu" x-init="init" x-model="_">
    <span x-text="_"></span>
    <div class="col-span-2 pr-4 ">
      <template x-for="_menuName in Object.keys(menu)">
          <div 
          @click="select_menu(_menuName)"
          x-ref="_menuName"
          :class="'cursor-pointer w-full text-sm font-bold p-2 bg-slate-50 border-b border-gray-300 pr-4 ' + ( (currentMenu===_menuName) ? currentMenuStyle : '' ) " 
          x-text="menu[_menuName].label"></div>
      </template>
    </div>    
    <div class="col-span-10" x-html="mainContent"></div>    
  </div>

I had to add the x-model property in the node holding the x-data.
This way, since it's the data model, every change on it will trigger a refresh.
In my case i choosed to assing the current timestamp, another way is to assign boolean values and using the negation operator to invert the value

NOTE: to access the data model from the select_menu function you'll need to bind this pointer to it using the bind native method (as in the init function i wrote.

[duemti]

I was too stumbling on this and came up with this solution

[ekwoka]

but...why would you want to?

[duemti]

As stated above x-for doesn't update when it's array/object is changed which is not the desired outcome.

for me i use alpinejs on ui to track changes to the list (one array as originalValues and currentValues, plus i use Sort plugin) after which user can click save which in turn will send the modiffied object to the backend. x-for uses originalValues to loop but when it is not updated after save (originalValues = modifiedValues) the ui doesn't update or worse messes up the ui.

x-data="{
  fieldsMetadata: {{ Js::from($fieldsMetadata) }},
  renderKey: 0, // Clever way to force re-render the component
  
  originalData: (() => {
	  const fieldsCustomization = {{ Js::from($fieldsCustomizationLocked) }};
	  return {
		  fieldsCustomization: fieldsCustomization, // ARRAY
		  fieldsVisibility: Object.fromEntries(fieldsCustomization.map(field => [field.key, field.visible])),
		  fieldsOrder: fieldsCustomization.map(field => field.key),
	  };
  })(),
  
  currentData: (() => {
	  const fieldsCustomization = {{ Js::from($fieldsCustomizationLocked) }};
	  return {
		  fieldsCustomization: fieldsCustomization, // ARRAY
		  fieldsVisibility: Object.fromEntries(fieldsCustomization.map(field => [field.key, field.visible])),
		  fieldsOrder: fieldsCustomization.map(field => field.key),
	  };
  })(),
  
  hasChanges() {
	  const fieldsVisibilityChanged = JSON.stringify(this.originalData.fieldsVisibility) !== JSON.stringify(this.currentData.fieldsVisibility);
	  const fieldsOrderChanged = JSON.stringify(this.originalData.fieldsOrder) !== JSON.stringify(this.currentData.fieldsOrder);
	  return fieldsVisibilityChanged || fieldsOrderChanged;
  },
  
  saveSorting(item, position) {
	  const oldIndex = this.currentData.fieldsOrder.findIndex(f => f === item);
	  if (oldIndex === -1) return;
	  const [movedItem] = this.currentData.fieldsOrder.splice(oldIndex, 1);
	  this.currentData.fieldsOrder.splice(position, 0, movedItem);
  },
  
  saveCustomization() {
	  const fieldsCustomization = this.currentData.fieldsOrder.map(fieldKey => ({
		  key: fieldKey,
		  visible: this.currentData.fieldsVisibility[fieldKey]
	  }));
  
	  $wire.saveFieldsCustomization(fieldsCustomization).then((result) => {
		  if (result.success) {
			  this.originalData.fieldsCustomization = [...result.fieldsCustomization];
			  this.originalData.fieldsVisibility = { ...this.currentData.fieldsVisibility };
			  this.originalData.fieldsOrder = [...this.currentData.fieldsOrder];
			  this.renderKey++;
  
			  $wire.dispatch('toast2', { message: result.message, type: 'success' });
		  } else {
			  $wire.dispatch('toast2', { message: result.message, type: 'error' });
		  }
	  });
  },
  
  hideAllFields() {
	  this.currentData.fieldsVisibility = Object.fromEntries(
		  Object.entries(this.currentData.fieldsVisibility).map(([key, value]) => [key, false])
	  );
  },
  
  cancelChanges() {
	  this.currentData.fieldsVisibility = { ...this.originalData.fieldsVisibility };
	  this.currentData.fieldsOrder = [...this.originalData.fieldsOrder];
	  this.renderKey++;
  },
}"

[ekwoka]

Ah, so it's an issue of x-sort with x-for. They are not compatible until my long open x-for refactor is merged...

[duemti]

i just noticed that even x-sort:handle doesn't work when used with x-sort!

<ul x-sort>
	<template x-for="i in 4">
		<li x-sort:item>
			<span x-sort:handle>---</span>
			<span>Element</span>
		</li>
	</template>
</ul>