将 v-edit-dialog 与组件一起使用？答案

【问题标题】：Using v-edit-dialog with components?将 v-edit-dialog 与组件一起使用？
【发布时间】：2020-01-03 04:30:51
【问题描述】：

我对 vuetify 提供的 v-edit-dialog 组件有疑问。所以，我渲染我的 v-data-table 的方式是我将带有道具的组件导入到模板槽中。根据文档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>

对不起，伙计们，我不知道如何复制这个问题，但我希望你能有所了解。再次感谢您。

【问题讨论】：

您的 codepen 链接无效。另外，请使用 stackoverflow 上的内置代码游乐场而不是 codepen，这样可以更轻松地在一个站点上查看所有内容。
@SølveTornøe 我已经更新了 codepen 链接。不知道那里发生了什么。
我没有在你的问题中看到你的问题。你想达到什么目的？您使用 v-edit-dialog 的方法是什么？ Codepen 看起来可以用？
现在他们将字段呈现在单个组件中，因此很容易将字段包装在 v-edit-dialog 示例蛋白质、碳水化合物等中，但我正在导入一个单独的组件，我是传递道具来实现我的蛋白质、碳水化合物等领域。那么如何将我的道具包装在 v-edit-dialog 中？
你想在你的my-component 中有一个v-edit-dialog，它使用protein 和carbs 的属性？

标签： javascript vue.js vuetify.js

【解决方案1】：

你应该看看documentation for component props。

您现在所做的是正确的并且应该可以工作，前提是您正确设置了组件my-component：

<!-- my-component example -->
<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>

为了使蛋白质和其他道具编辑/变异/更新您的props.item.protein等，您必须在道具中添加sync modifier。

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

否则，你会得到一个 vue 错误“你不应该直接改变一个 prop”

【讨论】：

轰隆隆。这正是我想要的。非常感谢。

【解决方案2】：

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

【讨论】：