时间戳

首页 > 解决方案 > 将 v-edit-dialog 与组件一起使用？

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

问题描述

我对 vuetify 提供的 v-edit-dialog 组件有疑问。所以，我渲染我的 v-data-table 的方式是我将带有道具的组件导入到模板槽中。根据文档链接，似乎必须直接渲染数据表，就像这个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>

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

标签： javascriptvue.jsvuetify.js

解决方案

您应该查看组件 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等，您必须向道具添加同步修饰符。

  <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 错误“你不应该直接改变一个道具”

推荐阅读