使用 <v-data-table> 和 <v-dialog> 操作按钮验证 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>

我也不知道如何 edit/delete 不同组件中对话框中的项目。

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

Answer 1

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

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

_{父级（数据Table）}

<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.模态组件可以使用一个watch在id变化时从api加载数据：

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

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

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

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

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

Vuetify CRUD app with <v-data-table> and <v-dialog> action buttons

crud

vue.js

vuex

vuetify.js

v-data-table