Alpine JS 无法正确更新 x-model

Question

我在简单的 Alpine 表单部分中选择的选项有问题。我的选择框从 api 中获取值。 x-model 在获取之前设置。选择框有时会显示正确的选定值，有时不会。即使我将在提取后设置值，也不会（总是）选择所选的选项。我如何确保始终设置正确的选定值？

注意：选择框2的值取决于第一个设置的值。但是，如果两者都设置，则它们必须都显示在 valueA 和 valueB 处给出的正确选择值。

这是我的功能

<script>
function alpineSelectFunction() {
    return {
        valueA: '100',
        arrayA: [],
        valueB: '101',
        arrayB: [],
        isLoading: false,
        apiUrl: "apiurl",
        fetchArrayA() {
            fetchUrl = this.apiUrl + `arrayA.json`;
            this.isLoading = true;
            fetch(fetchUrl)
                .then(res => res.json())
                .then(data =>  this.arrayA = data.data);
            this.isLoading = false;
        },
        fetchArrayB() {
            fetchUrl = this.apiUrl + `arrayB.json?id=${this.valueA}`;
            this.isLoading = true;
            fetch(fetchUrl)
            .then(res => res.json())
            .then(data => this.arrayB = data.data);
            this.isLoading = false;
        },
        init() {
            this.fetchArrayA();
            this.fetchArrayB();
        }
    }
}
</script>

这是html

<div x-data="alpineSelectFunction()" x-init="init()">
    <select name="valueA" x-model="valueA" :disabled="isLoading" x-on:input.debounce.750="fetchArrayB()">
        <option value="">Choose...</option>
        <template x-for="option in arrayA">
            <option :value="option.id" x-text="option.title"></option>
        </template>
    </select>

    <select name="valueB" x-model="valueB" :disabled="isLoading">
        <option value="">Choose...</option>
        <template x-for="option in arrayB">
            <option :value="option.id" x-text="option.title"></option>
        </template>
    </select>
</div>

Answer 1

在这种情况下，您遇到了问题，因为 x-model 在 x-for 之前获得了运行。

要避免这种情况，您可以绑定到 selected:

<div x-data="alpineSelectFunction()" x-init="init()">
    <select name="valueA" x-model="valueA" :disabled="isLoading" x-on:input.debounce.750="fetchArrayB()">
        <option value="">Choose...</option>
        <template x-for="option in arrayA">
            <option :value="option.id" :selected="option.id === valueA" x-text="option.title"></option>
        </template>
    </select>

    <select name="valueB" x-model="valueB" :disabled="isLoading">
        <option value="">Choose...</option>
        <template x-for="option in arrayB">
            <option :value="option.id" :selected="option.id === valueB" x-text="option.title"></option>
        </template>
    </select>
</div>

关键代码如下：

<option :value="option.id" :selected="option.id === valueA" x-text="option.title"></option>

<option :value="option.id" :selected="option.id === valueB" x-text="option.title"></option>

您可以在 https://github.com/alpinejs/alpine/issues/495#issuecomment-629671762.

找到问题的 discussion/explanation（以及另一个可能的解决方法）

Alpine JS 无法正确更新 x-model

Alpine JS not correctly update x-model

model

selected

fetch

alpine.js