Javascript 数据表项插槽中的Vuetify文本字段
我正在克隆一个数组,并使用Javascript 数据表项插槽中的Vuetify文本字段,javascript,vue.js,vuejs2,vuetify.js,Javascript,Vue.js,Vuejs2,Vuetify.js,我正在克隆一个数组,并使用map向数组中的每个对象添加属性。由于某些原因,在执行此操作时,添加的属性在v-model中使用时不会更新。知道为什么会这样吗 在下面的代码中,在文本字段中键入不会更新项目数量。如何修改代码,使其符合要求 <template> <v-data-table :headers="headers" :items="items" > <template v-slot:item.quantity="props">
map
向数组中的每个对象添加属性。由于某些原因,在执行此操作时,添加的属性在v-model
中使用时不会更新。知道为什么会这样吗
在下面的代码中,在文本字段中键入不会更新项目数量。如何修改代码,使其符合要求
<template>
<v-data-table
:headers="headers"
:items="items"
>
<template v-slot:item.quantity="props">
<v-text-field v-model="props.item.quantity"></v-text-field>
</template>
</v-data-table>
</template>
<script>
export default {
props: {
customer: {
type: Object,
required: true
}
},
data: () => ({
headers: [
{ text: 'ID', value: 'id' },
{ text: 'Description', value: 'description' },
{ text: 'Quantity', value: 'quantity' },
],
items: []
}),
created() {
this.initialize()
},
methods: {
initialize() {
const items = [...this.customer.items]
items.map(item => {
item.quantity = ''
})
this.items = items
}
}
</script>
更新
-键入
qty2
字段不会更新数据,因为它是使用map
添加到对象的。上述代码按预期工作,我在codepen中复制了相同的场景
在此处找到工作代码:
出于测试目的,尝试更改数据表中的第一个文本框,并检查控制台是否在键入时更新items对象
<div id="app">
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
class="elevation-1"
>
<template v-slot:item.protein="props">
<v-text-field
v-model="props.item.protein"
name="quantity"
outlined
@input="getdata"
type="number"
></v-text-field>
</template>
</v-data-table>
</v-app>
</div>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
headers: [
{
text: 'Dessert (100g serving)',
align: 'left',
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' },
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%',
},
{
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%',
},
],
}
},
methods: {
getdata() {
console.log(this.desserts[0].protein);
}
},
})
新Vue({
el:“#应用程序”,
vuetify:新的vuetify(),
数据(){
返回{
标题:[
{
文字:“甜点(100克),
对齐:“左”,
可排序:false,
值:“名称”,
},
{文本:'卡路里',值:'卡路里'},
{text:'Fat(g'),value:'Fat'},
{text:'Carbs(g)',value:'Carbs'},
{text:'Protein(g'),value:'Protein'},
{文本:'Iron(%)',值:'Iron'},
],
甜点:[
{
名称:“冷冻酸奶”,
卡路里:159,
脂肪:6.0,
碳水化合物:24,
蛋白质:4.0,
铁:1%,
},
{
名称:“冰淇淋三明治”,
卡路里:237,
fat:9.0,
碳水化合物:37,
蛋白质:4.3,
铁:1%,
},
{
名称:“Eclair”,
卡路里:262,
脂肪:16.0,
碳水化合物:23,
蛋白质:6.0,
铁:7%,
},
{
名字:“纸杯蛋糕”,
卡路里:305,
脂肪:3.7,
碳水化合物:67,
蛋白质:4.3,
铁:8%,
},
{
名称:“姜饼”,
卡路里:356,
脂肪:16.0,
碳水化合物:49,
蛋白质:3.9,
铁:16%,
},
{
名称:“果冻豆”,
卡路里:375,
脂肪:0.0,
碳水化合物:94,
蛋白质:0.0,
铁:0%,
},
{
名称:“棒棒糖”,
卡路里:392,
脂肪:0.2,
碳水化合物:98,
蛋白质:0,
铁:“2%”,
},
{
名称:“蜂巢”,
卡路里:408,
fat:3.2,
碳水化合物:87,
蛋白质:6.5,
铁:45%,
},
{
名称:“甜甜圈”,
卡路里:452,
脂肪:25.0,
碳水化合物:51,
蛋白质:4.9,
铁:22%,
},
{
名称:“KitKat”,
卡路里:518,
脂肪:26.0,
碳水化合物:65,
蛋白质:7,
铁:6%,
},
],
}
},
方法:{
getdata(){
console.log(this.desserts[0].protein);
}
},
})
解决方案是,在使用map
添加新对象属性之前,需要对customer.items
进行深度复制
initialize() {
let items = JSON.parse(JSON.stringify(this.customer.items))
items.map(item => {
item.quantity = '5'
return item
})
this.items = items
}
尝试使用
v-slot:item.quantity=“{item}”
v-model=“item.quantity”
。您是否可以共享this.customer.items的示例对象,这确实有助于解决您的问题issue@aze那是行不通的either@chans问题更新上述方法将更新对象,当您更改文本框中的值时,请让我知道,如果按照您的要求工作正常,则问题出在地图上。如果我使用map将属性添加到对象中,那么它将无法更新我刚刚使用深度副本解决了这个问题-谢谢您的帮助
initialize() {
let items = JSON.parse(JSON.stringify(this.customer.items))
items.map(item => {
item.quantity = '5'
return item
})
this.items = items
}