< vxe - form : model =" PatientIDForn ": data =" PatientIDForm " title - align =" right " title - width ="100"@ submit =" editSubmit "> < Vvxe - form - item v - for =" item of PatientIDForn ": key =" item . key " title - align =" left ": span ="24": title =" item . label "> < vxe - input v - model =" item . value " type =" number " min ="0" style =" width :60px": key =" item . key +'1'"></ vxe - input > < vxe - button type =" text " style =" color :#0e9aef": loading =" item . get _ button _ loading "@ click =" getPatientId ( item )": key =" item . key +'2'">获取</ vxe - button >< br >< vxe - input V - model =" item . result ": key =" item . key +'3'"></ vxe - input > < span : key =" item . key +'4'">{{'实际获取数量:'+( item . result ? item . result . split (). length :0]}}</ span > </ vxe - form - item ></ vxe - form >为什么我的第二个vxe-input中的值不随着getPatientId方法中的赋值而更新
时间: 2023-12-05 07:47:26 浏览: 88
可能是因为Vue的响应式数据机制没有触发更新。你可以尝试在getPatientId方法中,手动触发更新,即调用Vue的$forceUpdate方法,或者使用Vue.set方法更新数据。另外,你也可以在第二个vxe-input的v-model绑定中,使用计算属性,将item.result作为计算属性的依赖,这样当item.result发生变化时,计算属性会重新计算,从而更新v-model绑定的值。
相关问题
< vxe - form : model =" PatientIDForm ": data =" PatientIDForm " title - align =" right " title - width ="100"@ submit =" editSubmit "> < vxe - form - item V - for =" item of PatientIDForm ": key =" item . key ": title =" item . label " title - align =" left ": span ="24" field =" item "> < div > < vxe - input v - model =" item . value " type =" number " nin ="0" style =" width :68px": key =" iten . key +'1'"></ vxe - input > < vxe - button type =" text " style =" color :#Be9aef": loading =" iten . get _ button _ loading "@ click =" getPatientId ( item )": key =" item . key +'2'">获取</ vxe - button >< br >< vxe - input v - model =" item . result ": key =" item . key +'3'"></ vxe - input > < span : key =" item . key +'4'">{{'实际获取数量:'+( item . result ? item . result . split (','). length :0)}}</ span > </ div > </ vxe - form - item > </ vxe - form >为什么我的vxe-form-item中元素不实时更新
从你提供的代码来看,可能是因为你的 v-model 绑定方式有误。在你的代码中,你使用了 `v-model="item.value"` 和 `v-model="item.result"` 来绑定数据,但是你在模板中直接使用了 `item.value` 和 `item.result` 来更新数据,这会导致数据不会实时更新。
正确的绑定方式应该是在模板中使用 `v-model` 来绑定数据,像这样:
```html
<vxe-form-item v-for="item of PatientIDForm" :key="item.key" :title="item.label" title-align="left" :span="24" :field="item">
<div>
<vxe-input v-model="item.value" type="number" min="0" style="width: 68px" :key="item.key + '1'"></vxe-input>
<vxe-button type="text" style="color: #be9aef" :loading="item.get_button_loading" @click="getPatientId(item)" :key="item.key + '2'">获取</vxe-button>
<br>
<vxe-input v-model="item.result" :key="item.key + '3'"></vxe-input>
<span :key="item.key + '4'">{{ '实际获取数量:' + (item.result ? item.result.split(',').length : 0) }}</span>
</div>
</vxe-form-item>
```
这样就能保证数据实时更新了。另外,你的代码中有一个小错误,`v-for` 属性应该写作 `v-for="item in PatientIDForm"` 而不是 `v-for="item of PatientIDForm"`,这可能会导致语法错误。
<vxe-form-item v-for="item of PatientIDForm" :key="item.key" :title="item.label" title-align="left" :span="24" :field="item"> <div> <vxe-input v-model="item.value" type="number" min="0" style="width: 68px" :key="item.key + '1'"></vxe-input> <vxe-button type="text" style="color: #be9aef" :loading="item.get_button_loading" @click="getPatientId(item)" :key="item.key + '2'">获取</vxe-button> <br> <vxe-input v-model="item.result" :key="item.key + '3'"></vxe-input> <span :key="item.key + '4'">{{ '实际获取数量:' + (item.result ? item.result.split(',').length : 0) }}</span> </div> </vxe-form-item>为什么我的vxe-form-item中元素不实时更新
从你提供的代码来看,vxe-form-item中的元素应该是会实时更新的。如果出现了不实时更新的情况,可能是由于以下原因之一:
1. 绑定的数据没有及时更新:请检查你的数据是否已经及时更新,如果没有更新,那么vxe-form-item中的元素就不会实时更新。
2. 绑定的数据类型不正确:请检查你绑定的数据类型是否正确。如果绑定的数据类型不正确,那么vxe-form-item中的元素就不会实时更新。
3. vxe-form-item组件的属性设置不正确:请检查你的vxe-form-item组件的属性设置是否正确。如果属性设置不正确,那么vxe-form-item中的元素就不会实时更新。
具体到你的代码中,可能是因为 `getPatientId(item)` 方法中没有及时更新绑定的数据。你可以在该方法中更新 `item.result` 的值,像这样:
```javascript
getPatientId(item) {
item.get_button_loading = true
// 发起请求获取数据
axios.get('/api/getPatientId').then(res => {
item.result = res.data
item.get_button_loading = false
})
}
```
这样当你获取到数据之后,就会及时更新到组件的界面上了。如果以上方法都不能解决你的问题,你可以提供更多的细节信息,以便更好地帮助你解决问题。
阅读全文