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

Question

我目前正在学习 VueJS 以工作，我正在尝试构建一个 CRUD 应用程序来显示从 API 到 <v-data-table> 的项目，我想使用 <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>

    <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>

我这样调用 API：

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')
    },
  },
})

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

<template>
  <v-dialog>
    <template  v-slot:activator="{ on, attrs }">
      <v-btn
        small
        class="mr-2"
        v-on="on"
        v-bind="attrs"
        >
        Read More
      </v-btn>
    </template>
    <v-card>
      <v-card-text>
        {{THIS IS WHERE IT SHOULD BE DISPLAYED}}
      </v-card-text>
    </v-card>
  </v-dialog>
</template>
<script>
  export default {
    data: () => ({
  
    }),
  }
</script>

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

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

Answer 1

这是一种不使用激活器的方法，带有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. modal 组件使用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.模态组件可以使用watch在id改变时从api加载数据：

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

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

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

此外，对异步调用使用操作，而不是突变。