Alpine JS 没有正确更新 x-model答案

【问题标题】：Alpine JS not correctly update x-modelAlpine JS 没有正确更新 x-model
【发布时间】：2020-09-20 19:15:47
【问题描述】：

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

注意：选择框 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>

【问题讨论】：

标签： model fetch selected alpine.js

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

【讨论】：