Vue表格
数据赋值成功但页面
不渲染可能由多种原因导致，以下是一些常见的解决办法：
### 1. 确保
数据是响应式的
Vue 无法检测 property 的添加或移除，由于
Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 `data` 对象上存在才能让
Vue 将它转换为响应式的。如果是在
Vue 实例创建后动态添加属性，需要使用 `
Vue.set`（
Vue 2） 或 `reactive`、`ref`（
Vue 3） 来确保
数据的响应式更新 [^3]。
####
Vue 2 示例
```
vue
<template>
<div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr v-for="item in tableData" :key="item.id">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: []
};
},
methods: {
updateTableData() {
const newData = [
{ id: 1, name: 'John', age: 25 },
{ id: 2, name: 'Jane', age: 30 }
];
this.tableData = newData;
}
},
mounted() {
this.updateTableData();
}
};
</script>
```
####
Vue 3 示例
```
vue
<template>
<div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr v-for="item in tableData" :key="item.id">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script setup>
import { ref } from '
vue';
const tableData = ref([]);
const updateTableData = () => {
const newData = [
{ id: 1, name: 'John', age: 25 },
{ id: 2, name: 'Jane', age: 30 }
];
tableData.value = newData;
};
updateTableData();
</script>
```
### 2. 监听
数据变化并重新渲染
如果
数据是动态请求的，执行图表渲染（这里可类比表格渲染）的方法可能不是响应式的。可以通过监听
数据变化来执行表格渲染的操作。在
Vue 2 中可以使用 `watch` 选项，
Vue 3 中可以使用 `watch` 函数 [^1]。
####
Vue 2 示例
```
vue
<template>
<div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr v-for="item in tableData" :key="item.id">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: []
};
},
watch: {
tableData(newVal) {
//
数据变化时可以执行一些额外操作
console.log('Table data updated:', newVal);
}
},
methods: {
fetchData() {
// 模拟异步请求
setTimeout(() => {
const newData = [
{ id: 1, name: 'John', age: 25 },
{ id: 2, name: 'Jane', age: 30 }
];
this.tableData = newData;
}, 1000);
}
},
mounted() {
this.fetchData();
}
};
</script>
```
####
Vue 3 示例
```
vue
<template>
<div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr v-for="item in tableData" :key="item.id">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script setup>
import { ref, watch } from '
vue';
const tableData = ref([]);
watch(tableData, (newVal) => {
console.log('Table data updated:', newVal);
});
const fetchData = () => {
// 模拟异步请求
setTimeout(() => {
const newData = [
{ id: 1, name: 'John', age: 25 },
{ id: 2, name: 'Jane', age: 30 }
];
tableData.value = newData;
}, 1000);
};
fetchData();
</script>
```
### 3. 强制更新
在某些情况下，可以使用 `this.$forceUpdate()`（
Vue 2） 或通过重新
赋值一个新的响应式对象（
Vue 3） 来强制更新组件。
####
Vue 2 示例
```
vue
<template>
<div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr v-for="item in tableData" :key="item.id">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
</tr>
</tbody>
</table>
<button @click="updateData">Update Data</button>
</div>
</template>
<script>
export default {
data() {
return {
tableData: []
};
},
methods: {
updateData() {
const newData = [
{ id: 1, name: 'John', age: 25 },
{ id: 2, name: 'Jane', age: 30 }
];
this.tableData = newData;
this.$forceUpdate();
}
}
};
</script>
```
####
Vue 3 示例
```
vue
<template>
<div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr v-for="item in tableData" :key="item.id">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
</tr>
</tbody>
</table>
<button @click="updateData">Update Data</button>
</div>
</template>
<script setup>
import { ref } from '
vue';
const tableData = ref([]);
const updateData = () => {
const newData = [
{ id: 1, name: 'John', age: 25 },
{ id: 2, name: 'Jane', age: 30 }
];
tableData.value = [...newData]; // 重新
赋值
};
</script>
```
扫一扫
3297
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
