当前第一次提交表单后能正常渲染,但是第二次提交后渲染不出来
时间: 2024-11-15 09:25:56 浏览: 18
根据您提供的代码,问题可能出在 Vue 实例每次都会被重新创建,导致新的数据无法正确地更新到已存在的 DOM 结构中。以下是几点建议:
1. **避免重复初始化 Vue 实例**:`start` 函数中每次都创建一个新的 Vue 实例,这会导致之前的实例被覆盖。可以考虑将 Vue 实例的创建移到外部,只在需要时更新数据。
2. **更新现有 Vue 实例的数据**:如果已经有 Vue 实例存在,可以通过直接更新 `tableData` 来实现数据的刷新。
### 修改后的代码示例
```javascript
let vueInstance;
document.querySelector('#Search').addEventListener('submit', function (event) {
event.preventDefault();
let data = document.querySelector('.form-control').value;
console.log(data);
queryDataBase(data);
});
function queryDataBase(inputPatientId) {
console.log('fabao');
fetch('http://192.168.2.106:9000/ceshi', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ data: inputPatientId }),
})
.then(response => response.json())
.then(data => {
if (data.data.length !== 0) {
updateTableData(data.data);
} else {
alert('没有该住院号!');
}
});
}
function updateTableData(arr) {
if (!vueInstance) {
vueInstance = new Vue({
el: '#app3',
data: function () {
return {
tableData: arr,
sels: [] // 勾选复选框时获取整行数据
};
},
methods: {
changeTabBGKcolor({ row, rowIndex }) {
if (rowIndex % 2 === 0) {
return 'warning-row';
} else if (rowIndex % 2 !== 0) {
return 'success-row';
}
},
handleDelete(index, row) {
this.tableData.splice(index, 1);
},
selsChange(sels) {
this.sels = sels;
},
blurEvent(row) {
this.$message({
message: `修改成功`,
type: 'success',
duration: 1500
});
},
showTime(time) {
vVale = time;
}
}
});
} else {
vueInstance.tableData = arr;
}
}
```
### 关键点解释
- **`vueInstance` 变量**:用于存储 Vue 实例,避免多次创建。
- **`updateTableData` 函数**:检查是否已经存在 Vue 实例,如果不存在则创建并初始化;如果存在,则直接更新 `tableData`。
这样可以确保每次提交表单后,数据都能正确地更新到现有的 Vue 实例中,而不会因为重新创建实例而导致数据丢失。
阅读全文
相关推荐
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![docx](https://img-home.csdnimg.cn/images/20241231044901.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![7z](https://img-home.csdnimg.cn/images/20241231044736.png)