无头用户界面'选择的下拉列表在Inertia GET后停止工作

Question

我正在使用无头UI作为Tailwind UI的Vue实现和Vue3的一部分，它们在引入Inertia之前都能完美工作。

无头UI的ListboxOption具有一个Selected属性，该属性将Selected与Listbox的模型相匹配，并返回一个布尔值。

这是我的Dropdown脚本：

export default {
props: [
'modelValue', 'label', 'options'
],
data() {
return {
content: this.modelValue,
selected: null,
}
},
methods: {        
handleInput (e) {
this.content = e;
this.$emit('update:modelValue', this.content)
},
},
components: {
Listbox,
ListboxButton,
ListboxLabel,
ListboxOption,
ListboxOptions,
CheckIcon,
SelectorIcon,
},
created() {
this.selected = this.modelValue != '' ? this.modelValue : this.options[0];
},
watch: {
selected(value) {
this.handleInput(value)
},
}
}

如果我在发送updatemodelValue时不在父组件中做任何事情，那么一切都会完美地进行。Selected设置正确等

当我用preserveState执行Inertia.get时，我可以看到下拉列表中的selected属性已更新，并且与工作时完全相同，但ListboxOption的selected属性返回false。

Answer 1

对我来说有效的方法是先清空选定的数组，然后使用绑定到数组的项将项推送到选定的数组中。

例如，如果您有nutrients作为选项，selected_nutrients作为ListBox:进行v建模的内容

const nutrients = [
{ id: 1, name: 'Calories' },
{ id: 2, name: 'Fat' },
{ id: 3, name: 'Cholesterol' },
{ id: 4, name: 'Sodium' },
{ id: 5, name: 'Carbohydrates' },
{ id: 6, name: 'Fiber' },
{ id: 7, name: 'Sugar' },
{ id: 8, name: 'Protein' },
{ id: 9, name: 'Vitamin A' },
{ id: 10, name: 'Vitamin C' },
{ id: 11, name: 'Calcium' },
{ id: 12, name: 'Iron' }
];
const selected_nutrients = ref([nutrients[0], nutrients[1], nutrients[4], nutrients[7]])

你必须这样做才能让ListBox合作：

selected_nutrients.value = [];
for (let i = 0; i < tracked_nutrition.length; i++) {
selected_nutrients.value.push(nutrients[tracked_nutrition[i].id - 1]);
}