model - Alpine JS 没有正确更新 x-model
问题描述
我在简单的 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>
解决方案
在这种情况下,您遇到了问题,因为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找到对该问题的讨论/解释(以及另一个潜在的解决方法)。
推荐阅读
- amazon-web-services - AWS Cognito 巴黎区域的替代方案
- wordpress - 如何使用 AFC 计算表中的行数 - 高级自定义字段中继器
- reactjs - 访问 React Dropzone 组件上的“名称”属性
- ruby - 乘法问题:除以相同的小数并乘以不返回原始数字
- ms-word - 如何禁用保存、另存为或 ctr+c unsing office-js
- testing - Rego测试:如何测试“不否认”?
- javascript - React hooks - 由于关闭而使用旧状态异步更新 setState
- java - getSystemId() 的返回值
- javascript - 在对象中键入 svg 元素做出反应
- android - 无法覆盖firebase数据库