时间戳

首页 > 解决方案 > Vuetify CRUD 应用程序和动作按钮

vue.js - Vuetify CRUD 应用程序和动作按钮

问题描述

我目前正在为工作学习 VueJS，我正在尝试构建一个 CRUD 应用程序，该应用程序显示从 API 到 a 的项目<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>

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

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

标签： vue.jsvuetify.jsvuexcrudv-data-table

解决方案

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

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 组件使用计算的 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.modal组件在id发生变化时可以使用awatch从api中加载数据：

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

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

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

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

推荐阅读