fix(astrolabe): update Vue component bindings for Vue 3 compatibility

The astrolabe app was using Vue 2 style bindings that don't work with
@nextcloud/vue 9.x and Vue 3:

- NcTextField: Changed from :value/@update:value to v-model
- NcSelect: Changed from v-model (with computed prop) to
  :model-value/@update:model-value

The legacy :value and @update:value props were being ignored because
@nextcloud/vue 9.x components use modelValue/update:modelValue internally.
This caused the search button to remain disabled and the algorithm
dropdown to be unresponsive.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Chris Coutinho
2026-01-15 12:06:20 +01:00
parent 02418a9531
commit cb4e8acd9f
+5 -7
View File
@@ -48,19 +48,18 @@
<div class="mcp-search-card">
<div class="mcp-search-row">
<NcTextField
:value="query"
v-model="query"
:label="t('astrolabe', 'Search query')"
:placeholder="t('astrolabe', 'Enter your search query...')"
class="mcp-search-input"
@update:value="query = $event"
@keyup.enter="performSearch" />
<NcSelect
v-model="selectedAlgorithmOption"
:model-value="selectedAlgorithmOption"
:options="algorithmOptions"
:placeholder="t('astrolabe', 'Algorithm')"
class="mcp-algorithm-select"
@input="algorithm = $event ? $event.id : 'hybrid'" />
@update:model-value="algorithm = $event ? $event.id : 'hybrid'" />
<NcButton
type="primary"
@@ -105,11 +104,10 @@
<div class="mcp-option-group">
<label>{{ t('astrolabe', 'Result Limit') }}</label>
<NcTextField
:value="limit"
v-model="limit"
type="number"
:min="1"
:max="100"
@update:value="limit = Number($event)" />
:max="100" />
</div>
<div class="mcp-option-group">