Creating a simple list with CRUD type options in Vue Native

We are going to learn how to generate a simple list in Vue Native, in which we are going to use two main components, the scrollview, so that our screen allows this functionality, and that of an item, which in this example, is a view.

It is important to note before starting that we do NOT need to use any add-ons or plugins to make any additional elements work, only the components that we have for free in Vue Native.

We'll use the scrollview component to place our list items; This container is excellent for placing content that may or may not have to be scrolled to be viewed; Its structure is simple, we define it to occupy the maximum size:

<scroll-view :style="{ minHeight: '100%' }">

And from one of our elements or items that are included in a view with its text and our CRUD type options, that of deleting and editing (for example):

     <view v-for="c in cites" v-bind:key="c.id">
       <text :style="{ fontSize: 18 }"> {{ c.name }} {{ c.surname }} </text>
       <view :style="{ flexDirection: 'row-reverse' }">
         <touchable-opacity :on-press="() => remove(c)">
           <text> Eliminar </text>
         </touchable-opacity>
         <touchable-opacity :on-press="() => edit(c)">
           <text> Editar </text>
         </touchable-opacity>
       </view>
     </view>

Here we use two functions when triggering the click or on-press event to call remove the item or edit it.

Finally the complete code of the template:

<template>
 <view class="container">
  <FlashMessage position="top" />
   <scroll-view :style="{ minHeight: '100%' }">
     <view v-for="c in cites" v-bind:key="c.id">
       <text :style="{ fontSize: 18 }"> {{ c.name }} {{ c.surname }} </text>
       <view :style="{ flexDirection: 'row-reverse' }">
         <touchable-opacity :on-press="() => remove(c)">
           <text> Eliminar </text>
         </touchable-opacity>
         <touchable-opacity :on-press="() => edit(c)">
           <text> Editar </text>
         </touchable-opacity>
       </view>
     </view>
   </scroll-view>
   <FABExtended
     :style="style.fab_dowm"
     label="Crear"
     :callback="() => navigation.navigate('Form')"
   />
 </view>
</template>

In which as an extra, we use an extended type button that is customized by us and we talk about it in another entry.

And of course, our v-for, to iterate the elements or items.

As for the Script, typically, we load components, for example the style using JavaScrip and the floating type button and the CRUD type functions to delete and edit the records, which allow deleting an item under a confirmation dialog and sending to another component for editing, respectively:

<script>
import { Alert } from "react-native";
import FlashMessage from "react-native-flash-message";
import { showMessage } from "react-native-flash-message";
import {
 storeGetCites,
 storeSetCite,
 storeDeleteCite,
} from "../helpers/storage";
import { style } from "../helpers/styles";
import FABExtended from "../components/FABExtended";
export default {
 async mounted() {
   this.cites = await storeGetCites();
   // TEMPORAL
   if (this.cites.length == 0) {
     await storeSetCite({
       name: "Andres",
       surname: "Cruz",
       age: "30",
       description: "Hola Mundo",
       state: "Soltero",
       sex: true,
     });
     await storeSetCite({
       name: "Maria",
       surname: "Lopez",
       age: "22",
       description: "Hola Mundo 2",
       state: "Soltero",
       sex: false,
     });
     await storeSetCite({
       name: "Juan",
       surname: "Mendoza",
       age: "24",
       description: "Otro",
       state: "Soltero",
       sex: true,
     });
     this.cites = await storeGetCites();
   }
   // FINAL TEMP
   this.navigation.addListener("didFocus", async () => {
     //alert(this.navigation.state.params)
     // this.cites = []
     this.cites = await storeGetCites();
   });
 },
 data() {
   return {
     cites: [],
     style,
   };
 },
 components: {
   FABExtended,
   FlashMessage,
 },
 props: {
   navigation: {
     Object,
   },
 },
 methods: {
   edit(cite) {
     this.navigation.navigate("Form", cite);
     console.log(cite);
   },
   async remove(cite) {
     return Alert.alert(
       "Eliminar",
       "¿Seguro que desea eliminar la cita seleccionada?",
       [
         {
           text: "Si",
           onPress: async () => {
              await storeDeleteCite(cite);
             showMessage({
               message: "Cita eliminada exitosamente.",
               type: "danger",
             });
             this.cites = await storeGetCites();
           },
         },
         {
           text: "No"
         }
       ]
     );
   },
 },
};
</script>
<style>
.container {
 width: 90%;
 margin-top: 15px;
 margin-right: auto;
 margin-left: auto;
}
</style>

In addition to the above, we have a couple more components:

The Alert component, to ask for confirmation on deletion
The component called FlashMessage, which is a third-party component and therefore we install through Node externally, and allows us to display a flash-type message.

You can find the complete code for this example, in the following repository, which is part of my complete course on Vue Native.

Vue Native

Vue

Lista

CRUD

Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz In Udemy