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找到该问题的讨论/解释（以及另一个潜在的解决方法）。