Question

我对vuetify提供的v-edit-dialog组件有疑问。因此，我渲染我的v-data-table的方式是，我将带有props的组件导入模板插槽。根据文档link，似乎必须像codepen这样直接渲染数据表。

所以我不确定如何使用我的方法使v-edit-dialog工作。

这是我的代码的样子：-

  <template>
    <v-data-table>
       <template v-slot:items="props">
          <my-component 
            :protein="props.item.protein"
            :carbs="props.item.carbs" 
            :fats = "props.item.fats"
            :iron="props.item.iron"/>
       </template>
    <v-data-table>
  </template>

对不起，我不知道该如何重复这个问题，但我希望您有所想法。再次感谢您。

Answer 1

您应该看看documentation for component props。

只有在正确设置了组件UploadCount的情况下，您现在所做的事情是正确的并且应该起作用：

my-component

为了使蛋白质和其他道具编辑/变异/更新 <template> <v-edit-dialog :return-value.sync="protein"> {{ protein }} <template v-slot:input> <v-text-field v-model="protein" :rules="[max25chars]" label="Edit" single-line counter /> </template> </v-edit-dialog> </template> <script> export default { name: 'my-component', props: { protein: { type: String, default: '', }, //... the rest of the props you want to access }, } </script>等，您必须在道具中添加sync modifier。

props.item.protein

否则，您将收到一个提示错误“您不应该直接变异道具”

Answer 2

<template v-slot:items="props">. 
for this eazy right is 
<template v-slot:items="{ item }">
<my-component 
            {{item. protein}}

对组件使用v-edit-dialog？

2 个答案: