使用 <v-data-table> 和 <v-dialog> 操作按钮 Vuetify CRUD 应用程序

问题描述

我目前正在学习用于工作的 VueJS，我正在尝试构建一个 CRUD 应用程序，该应用程序将 API 中的项目显示到 <v-data-table>，我想使用 {{} 编辑、删除和创建新项目1}}。

这是我的主屏幕：

<v-dialog>

<template>
  <v-app>
    <v-main>
      <div>
        <v-text-field
          v-model="search"
          append-icon="mdi-magnify"
          single-line
          hide-details
          label="search">
        </v-text-field>
        <v-data-table
          :items="movies"
          :headers="headers"
          :search="search"
        >
          <template v-slot:[`item.actions`]>
            <edit-movie></edit-movie>
            <delete-movie></delete-movie>
            <details-movie></details-movie>
          </template>
        </v-data-table>
      </div>
    </v-main>
  </v-app>
</template>

我这样调用 API：

    <script>
    import {mapState} from 'vuex';
    import DeleteMovie from './components/deleteMovie.vue';
    import DetailsMovie from './components/detailsMovie.vue';
    import EditMovie from './components/editMovie.vue';
    
    export default {
      name: 'App',components: {
        EditMovie,DeleteMovie,DetailsMovie
     
      },mounted(){
        this.$store.dispatch('getMovies');
      },data: () => ({
        search: ''
      }),computed: {
        headers() {
          return [
                    {text: "Title",value: "title"},{text: "Overview",value: "overview"},{text: "Votes",value:"Vote_average"},{text: 'Actions',value: 'actions',sortable: false },{text: '',value: 'details'},]
        },...mapState({
                movies:state => state.movies
            })
      },}
    
    </script>

现在，我主要关心的是如何调用单个项目并在此对话框中显示所有详细信息： （它必须在不同的组件中）

export default new Vuex.Store({
  state: {
    movies: [],},mutations: {
    async getMovies(state){
      let response = await axios.get(`https://api.themoviedb.org/3/movie/Now_playing?api_key=${public_key}&language=en-US`)
      .then((result) => {
        result.data.results.forEach(item => {
          console.log(item)
          state.movies.push(item)
        });
      })
      .catch((error) => {
        console.log(error)
      })
    }
  },actions: {
    getMovies: context => {
      context.commit('getMovies')
    },})

我也不知道如何在不同组件的对话框中编辑/删除项目。

无论如何，提前感谢您的帮助

解决方法

这是一种不使用激活器的方法，带有 demo。例如，我将展示如何仅使用 Edit 模态，您可以通过重复这些步骤来创建其他模态。

1. 将模态组件放置在表格之外。使用插槽中的按钮在单击时为模态组件设置 v-model 值。它将传递行项目的 id:

_{父级（数据表）}

<div>
  <v-data-table :headers="headers" :items="movies">
    <template v-slot:[`item.actions`]="{ item }">
      <v-btn @click.stop="idEdit = item.id">Edit</v-btn>
    </template>
  </v-data-table>

  <edit-movie v-model="idEdit"></edit-movie>
</div>

data: {
  return {
    idEdit: null,}
}

2. 模态组件使用 computed setter 显示模态（如果 id 值已被传递，并在关闭时发出事件以清除 id：

_{子（模态）}

<template>
  <v-dialog v-model="show">
    <v-card>ID: {{ value }}</v-card>
  </v-dialog>
</template>

export default {
  props: ['value'],// References the `v-model` prop
  computed: {
    // Computed getter / setter
    show: {                 
      get() { return this.value !== null },set(value) { this.$emit('input',null) }  // Clear the `v-model` to close
    }
  }
}

3. 当 id 发生变化时，modal 组件可以使用 watch 从 api 加载数据：

watch: {
  value(newValue) {
    if (!newValue) return;
    console.log(`Load data here with ID: ${newValue}`);
  }
}

这是一个演示：https://codepen.io/sh0ber/pen/poNLVvz

没有激活器的好处是每个动作类型只创建一个组件，而不是每个类型的每行一个。它可以进一步改进为只有一个总模态组件。

此外，对异步调用使用操作，而不是更改。