Vue Basics

emilo Post Leave a Comment

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="https://unpkg.com/vue"></script>
<script src="https://kit.fontawesome.com/ee0bae939c.js" crossorigin="anonymous"></script>
<style>
  .hidden {
    display: none;
  }
  .visible {
    display: block;
  }
</style>
</head>
<body>
        <div id="app">
                <button @click="addArray()"><i class="fas fa-plus"></i> ADD</button>
                <button><i class="fas fa-sort-amount-up-alt"></i> ITEMS: {{array.length}}</button>
                <button @click="filteredArray()"><i class="fas fa-sort"></i> SORT</button>
                <select v-model="currentTag">
                  <option selected></option>
                  <option>ANGULAR</option>
                  <option>REACT</option>
                  <option>VUE</option>
                </select>
                <input type="text" placeholder="Search..." v-model="searchField">
                <template>
                    <div v-for="(item, index) in array">
                    <div v-if="item.Title.toLowerCase().includes(searchField.toLowerCase()) && item.Tag.toLowerCase().includes(currentTag.toLowerCase())">
                            <span>ID: {{ index +1 }} - TITLE: {{ item.Title }} - BIO: {{item.Bio}} - TAG: {{item.Tag}} - TIME: {{item.Time}}</span>
                            <select v-model="item.Tag" v-show="array[index].EditMode">
                                <option>ANGULAR</option>
                                <option>REACT</option>
                                <option>VUE</option>
                            </select>
                            <input type="text" v-model="item.Title" v-show="array[index].EditMode">
                            <button  @click="array[index].EditMode ^= true"><i class="fas fa-edit"></i> EDIT</button>
                            <button @click="deleteArray(index)"><i class="fas fa-trash"></i> DELETE</button>
                    </div>
                  <div v-else=""></div>
                </div>
            </template>
              </div>
    <script>
        new Vue({
  el: '#app',
  data: {
    array: [
    {Title: "VUE", Bio: "SOMETHING COOL", Time: new Date().toLocaleTimeString(), Tag: "VUE", EditMode: false},
    {Title: "ANGULAR", Bio: "SOMETHING COOL", Time: new Date().toLocaleTimeString(), Tag: "ANGULAR", EditMode: false},
    {Title: "REACT", Bio: "SOMETHING COOL", Time: new Date().toLocaleTimeString(), Tag: "REACT", EditMode: false}
    ],
    searchField: "",
    currentTag: ""
  },
  methods: {
    addArray() {
        var obj = {Title: "VUE", Bio: "SOMETHING COOL", Time: new Date().toLocaleTimeString(), Tag: "VUE", EditMode: false};
        this.array.push(obj)
    },
    deleteArray(index) {
        this.array.splice(index,1);
    },
    filteredArray() {
      return this.array.reverse();
    }

  }
})
    </script>
    </body>
</html>