Simple Vue Native TODO example with NativeBase components

todo-native.vue

<template>
  <nb-container>
    <nb-header></nb-header>
    <nb-grid>
      <nb-row :style="{ height: 60 }" v-for="(todo, idx) in todos" :key="idx">
        <nb-col :size="85" :style="{ justifyContent: 'center' }">
          <text :style="{marginLeft: 10}">{{todo}}</text>
        </nb-col>
        <nb-col :size="15" :style="{ justifyContent: 'center'  }">
          <nb-button iconCenter transparent :on-press="() => removeItem(idx)">
            <nb-icon name="trash" />
          </nb-button>
        </nb-col>
      </nb-row>
      <nb-row></nb-row>
      <nb-row :style="{ height: 60 }">
        <nb-col :size="85" :style="{ justifyContent: 'center' }">
          <text-input :style="{marginLeft: 10}" placeholder="Todo item" v-model="todoText" />
        </nb-col>
        <nb-col :size="15" :style="{ justifyContent: 'center'  }">
          <nb-button iconCenter transparent :on-press="addItem">
            <nb-icon name="add" />
          </nb-button>
        </nb-col>
      </nb-row>
    </nb-grid>
  </nb-container>
</template>

<script>
import Vue from "vue-native-core";
import { VueNativeBase } from "native-base";

Vue.use(VueNativeBase);

export default {
  data() {
    return {
      todoText: "",
      todos: []
    };
  },
  methods: {
    addItem() {
      this.todos.push(this.todoText);
      this.todoText = "";
    },
    removeItem(idx) {
      this.todos.splice(idx, 1);
    }
  }
};
</script>