Vue练习CRUD

<template>
  <div><input v-model="prefix" placeholder="Filter Surname">div>
 
  <select size="6" v-model="selected">
    <option v-for="name in filteredNames" :key="name">{{ name }}option>
  select>
 
  <label>Surname: <input v-model="last">label>
  <label>Name: <input v-model="first">label>
  
  <div class="buttons">
    <button @click="create">Createbutton>
    <button @click="update">Updatebutton>
    <button @click="del">Deletebutton>
    <button @click="reset">Resetbutton>
  div>
  <p v-if="isShowMessage">{{message}}p>
template>
 
<script>
  
const initialNames = () => ['于, 于禁', '许, 许褚', '张, 张郃']
  
export default {
  data() {
    return {
      names: initialNames(),
      selected: '',
      prefix: '',
      first: '',
      last: '',
      createMessage: '创建前请输入内容',
      updateMessage: '请选择要修改的名称',
      delMessage: '请选择要删除的名称',
      repeatMessage: '名称已存在',
      warn: '最少预留一个名称',
      isShowMessage: false,
      message: ''
    }
  },
  computed: {
    filteredNames() {
      return this.names.filter((n) =>
        n.toLowerCase().startsWith(this.prefix.toLowerCase())
      )
    }
  },
  watch: {
    selected(name) {
      ;[this.last, this.first] = name.split(', ')
      this.isShowMessage = false
    }
  },
  methods: {
    create() {
      if (this.hasValidInput()) {
        const fullName = `${this.last}, ${this.first}`
        if (!this.names.includes(fullName)) {
          this.names.push(fullName)
          this.first = this.last = ''
          this.isShowMessage = false
         }else{
          this.message = this.repeatMessage
          this.isShowMessage = true
         }
        }else{
          this.message = this.createMessage
          this.isShowMessage = true
      }
    },
    update() {
      debugger
      if (this.hasValidInput() && this.selected) {
          const i = this.names.indexOf(this.selected)
          const fullName = `${this.last}, ${this.first}`
          if (!this.names.includes(fullName)) {
            this.names[i] = this.selected = `${this.last}, ${this.first}`
            this.isShowMessage = false
          }else{
            this.message = this.repeatMessage
            this.isShowMessage = true
         }
      }else{
        this.message = this.updateMessage
        this.isShowMessage = true
      }
    },
    del() {
        if (this.selected) {
          if(this.names.length <=1){
             alert(this.warn)
             return
          }
          const i = this.names.indexOf(this.selected)
          this.names.splice(i, 1)
          this.selected = this.first = this.last = ''
          this.isShowMessage = false
 
       }else{
          this.message = this.delMessage
          this.isShowMessage = true
      }    
    },
    reset(){
      this.names = initialNames()
    },
    hasValidInput() {
      return this.first.trim() && this.last.trim()
    }
  }
}
script>
 
<style>
* {
  font-size: inherit;
}
 
input {
  display: block;
  margin-bottom: 10px;
}
 
select {
  float: left;
  margin: 0 1em 1em 0;
  width: 14em;
}
 
.buttons {
  clear: both;
}
 
button + button {
  margin-left: 5px;
}
  
p {
  color: red;
}
style>