阿尔卑斯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.comalpinejsalpineissues495#issuecomment-629671762。.