我有一个Vuetify数据表，每5秒从服务器刷新一次。它有可选择的行。如果您选择了一行，那么数据中的某些内容发生了更改，则所选项目的v-model数组不会反映行项目内部的更改。这个代码笔是Vuetify示例的一个稍微修改过的版本：
https://codepen.io/hobbeschild/pen/bGqGMQQ?editors=1010
选择第一行。在顶部，您将看到所选项目中的时间。等待5秒钟，等待数据刷新。您将看到所选项目时间与行项目时间不再匹配。
有没有办法确保v-model数组内容反映项目中的新值？我可以想出一种通过编程实现这一点的方法，但我有很多这样的表，希望有一种更简单的方法，也许可以使用表道具。
HTML:
<div id="app">
<v-app id="inspire">
<div>selected = {{ selected[0] }}</div>
<div>
<v-data-table
v-model="selected"
show-select
item-key="name"
:headers="headers"
:items="desserts"
:options.sync="options"
:server-items-length="totalDesserts"
:loading="loading"
class="elevation-1"
></v-data-table>
</div>
</v-app>
</div>
JS:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
selected: [],
totalDesserts: 0,
desserts: [],
loading: true,
options: {},
headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' },
{ text: 'Time', value: 'time' },
],
reloadTimerId: Number,
}
},
watch: {
options: {
handler () {
this.getDataFromApi()
},
deep: true,
},
},
mounted () {
this.getDataFromApi();
this.reloadTimerId = setInterval(this.getDataFromApi, 5000);
},
methods: {
getDataFromApi () {
this.loading = true
this.fakeApiCall().then(data => {
this.desserts = data.items
this.totalDesserts = data.total
this.loading = false
})
},
/**
* In a real application this would be a call to fetch() or axios.get()
*/
fakeApiCall () {
return new Promise((resolve, reject) => {
const { sortBy, sortDesc, page, itemsPerPage } = this.options
let items = this.getDesserts()
const total = items.length
if (sortBy.length === 1 && sortDesc.length === 1) {
items = items.sort((a, b) => {
const sortA = a[sortBy[0]]
const sortB = b[sortBy[0]]
if (sortDesc[0]) {
if (sortA < sortB) return 1
if (sortA > sortB) return -1
return 0
} else {
if (sortA < sortB) return -1
if (sortA > sortB) return 1
return 0
}
})
}
if (itemsPerPage > 0) {
items = items.slice((page - 1) * itemsPerPage, page * itemsPerPage)
}
setTimeout(() => {
resolve({
items,
total,
})
}, 1000)
})
},
getDesserts () {
return [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
time: new Date(),
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%',
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
iron: '7%',
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
iron: '8%',
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
iron: '16%',
},
{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
iron: '0%',
},
{
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
iron: '2%',
},
{
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
iron: '45%',
},
{
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
iron: '22%',
},
{
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
iron: '6%',
},
]
},
},
})
我不认为有任何"内置"；做你想做的事的方式。问题是模型(代码中的selected(包含对items/deserts数组中选定对象的引用。如果将items/deserts(用this.desserts = data.items(替换为包含全新对象的全新数组，则会得到。。。
所以，自己做这件事肯定是唯一的办法。任一：
- 无论何时更换
items/deserts，都要重新创建selected
this.selected = data.items.filter(i => this.selected.findIndex(item => item.name === i.name) > -1)
- 或者不替换数组和它的项-用新数据更新现有对象