Question

我现在正在创建一个包含4个不同表的页面。每个表中的所有行都将具有更新和删除按钮。当我分别为每个表编码所有CRUD函数时，我可以使所有工作正常进行。但是我想做的是例如创建一个用于更新操作的函数，并将表名作为参数传递。

<tr v-for="asset in assets" :key="asset.id">
  <td>{{asset.id}}</td>
  <td>{{asset.name}}</td>
  <td>{{asset.category.name}}</td>
  <td>
    <a href @click.prevent="editDialog(asset, 'asset')">Edit</a>
    <a href @click.prevent="deleteThis(asset.id)">Delete</a>
  </td>
</tr>

这是用于编辑和创建项目的弹出窗口：

<v-dialog v-model="dialog">
 <div v-if="editMode">
   <div v-if="target_table == 'asset'">
     <form>...</form>
   </div>
 </div>
 <div v-else>...</div>
</v-dialog>

我在脚本中有这些东西

export default {
  data() {
    return {
      dialog: false,
      editMode: false,
      target_table: "",
      assets: {},
      asset: new Form({
        id: "",
        name: "",
        category: "",
      }),
    }
  },
  methods: {
    fetchAssets() {
      axios.get("/api/assets").then(({ data }) => (this.assets = data));
    },
    editDialog(data, table) {
      this.target_table = table;
      this.editMode = true;
      this.dialog = true;
      this.table.fill(data);
    },
  },
}

这是我的问题。如果您查看代码的最后一行，我试图填充一个名为“ asset”的表单，该表单带有editDialog（asset，'asset'）作为其第二个参数。但是使用这种语法，Vuejs转到数据对象并查找“表”作为键而不是“资产”，并且出现“表未定义”错误。我该如何运作？谢谢。

Answer 1

我建议您将true更改为this.table.fill(data);

让我知道它是否有效

在Vue.js中将参数值作为键传递给数据对象

1 个答案: