Closed PhiloNL closed 3 years ago
- [ ] Fix console error related to
x-for
https://github.com/livewire-ui/spotlight/blob/alpine-v3/resources/views/spotlight.blade.php#L50Uncaught (in promise) ReferenceError: id is not defined at eval (eval at generateFunctionFromString (app.js:1643), <anonymous>:3:32) at app.js:1654 at tryCatch (app.js:1678) at app.js:2903 at runIfTypeOfFunction (app.js:1673) at app.js:1656 at tryCatch (app.js:1678) at loop (app.js:2886) at app.js:2876 at Array.reactiveEffect (app.js:496)
quick-fix for this:
<template x-for="(item, i) in filteredItems()" :key>
<li>
<button @click="go(item[0].item.id)" class="block w-full px-6 py-3 text-left"
:class="{ 'bg-gray-700': selected === i, 'hover:bg-gray-800': selected !== i }">
<span x-text="item[0].item.name"
:class="{'text-gray-300': selected !== i, 'text-white': selected === i }"></span>
<span x-text="item[0].item.description" class="ml-1"
:class="{'text-gray-500': selected !== i, 'text-gray-400': selected === i }"></span>
</button>
</li>
</template>
no need to remove x-init="init()"
- [ ] Fix console error related to
x-for
https://github.com/livewire-ui/spotlight/blob/alpine-v3/resources/views/spotlight.blade.php#L50Uncaught (in promise) ReferenceError: id is not defined at eval (eval at generateFunctionFromString (app.js:1643), <anonymous>:3:32) at app.js:1654 at tryCatch (app.js:1678) at app.js:2903 at runIfTypeOfFunction (app.js:1673) at app.js:1656 at tryCatch (app.js:1678) at loop (app.js:2886) at app.js:2876 at Array.reactiveEffect (app.js:496)
quick-fix for this:
<template x-for="(item, i) in filteredItems()" :key> <li> <button @click="go(item[0].item.id)" class="block w-full px-6 py-3 text-left" :class="{ 'bg-gray-700': selected === i, 'hover:bg-gray-800': selected !== i }"> <span x-text="item[0].item.name" :class="{'text-gray-300': selected !== i, 'text-white': selected === i }"></span> <span x-text="item[0].item.description" class="ml-1" :class="{'text-gray-500': selected !== i, 'text-gray-400': selected === i }"></span> </button> </li> </template>
no need to remove
x-init="init()"
Thanks @bhuebschen! I'm curious, do you know why the original code is no longer working?
<template x-for="([{ item: { id, name, description }}, i]) in filteredItems()" :key="id">
Thanks @bhuebschen! I'm curious, do you know why the original code is no longer working?
<template x-for="([{ item: { id, name, description }}, i]) in filteredItems()" :key="id">
The way AlpineJS works with variable inside a loop is different now.... now the object you work with inside the loop, is now the same as it is outside... previously it seems that the variables where made global inside the loop-scope, but this no longer works.
Take a look at https://github.com/livewire-ui/spotlight/blob/alpine-v3/resources/js/spotlight.js#L93, the way to retrieve the data is now the same in the x-for-loop
Rewriting of filteredItems
requires to replace also
https://github.com/livewire-ui/spotlight/blob/alpine-v3/resources/js/spotlight.js#L93
and
https://github.com/livewire-ui/spotlight/blob/master/resources/js/spotlight.js#L102
Alpine previously also allowed to use the object-var as key.. this also doesn't work anymore .. but providing an empty key works fine
@bhuebschen Thanks for the explanation, appreciate it 🙌 I've made the changes you suggested.
Update Spotlight to Alpine v3.
x-for
https://github.com/livewire-ui/spotlight/blob/alpine-v3/resources/views/spotlight.blade.php#L50