БЛОГ НА HUSL


Как реализовать поиск, добавить и удалить номер, электронную почту и адрес с помощью vuejs, vuecli?

Автор вопроса: bakha

Здравствуйте программисты. Я новичок, сейчас разбираюсь с VueJs, VueCli. Нужна ваша квалифицированная помощь. Для практики пытаюсь написать простой телефонный справочник с доступом через Web- интерфейс (без использования баз данных).

Возможные действия: ● добавить телефон (строка) и имя (строка) в справочник ● отобразить список имён-номеров ● выполнить поиск по подстроке имени через строку поиска ● удалить из справочника (со списка). Отображение: Отображается список имён-номеров, с этого списка доступны все действия - добавление, поиск, удаление, отображение информации по найденным номерам (если задана подстрока поиска по имени, то в список попадают только отфильтрованные имена- номера). Дубли имён-номеров добавлять нельзя. При недоступных и неадекватных действиях выводить соответствующие сообщения. Необходимо выполнить задание с использованием VueJs + Bootstrap 4, возможно использовать vuex, vuerouter.

Не сохраняется, даже при перезагрузки страниц. Не могу разобратся как правильно поступить? Помогите советами или ссылкой на что-то похоже.

export default {
    data() {
      return {
        name: '',
        nameState: null,
        submittedNames: [],
        phone: '',
        phoneState: Number,
        submittedPhone: [],
        email: '',
        emailState: null,
        submittedEmail: []
      }
    },
    methods: {
      checkFormValidity() {
        const valid = this.$refs.form.checkValidity()
        this.nameState = valid
        return valid
      },
      resetModal() {
        this.name = ''
        this.nameState = 'null'
      },
      handleOk(bvModalEvt) {
        // Prevent modal from closing
        // Предотвратить закрытие модального окна
        bvModalEvt.preventDefault()
        // Trigger submit handler
        this.handleSubmit()
      },
      handleSubmit() {
        // Exit when the form isn't valid
        // Выйти, если форма недействительна
        if (!this.checkFormValidity()) {
          return
        }
        // Push the name to submitted names
        // Вставьте имя в отправленные имена
        this.submittedNames.push(this.name),
        this.submittedPhone.push(this.phone),
        this.submittedEmail.push(this.email)
        // Hide the modal manually
        // Скрыть модальное окно вручную
        this.$nextTick(() => {
          this.$bvModal.hide('modal-prevent-closing')
        })
      }
    }
  }
.add-contact {
    position: fixed;
    bottom: 0;
    right: 0;
  }

.icon__svg {
    margin-right: 25px;
    margin-bottom: 25px;
    border-radius: 50%;
    background-color: rgb(0, 131, 143);
    transition: fill .4s ease;
  }
  
.icon__svg:focus  {
    outline: none;
  }
  
.icon__svg:hover {
    background-color: rgb(0 131 143 / 0.85);
  }
  
.icon__svg::after {
    display: none;
  }

.container__phone,
.container__phone__number {
  display: grid;
}

.phone__text {
  width: 445px;
  grid-column-start: 1;
  padding: 5px;
}

.phone__number__button {
  display: grid;
  width: 445px;
  margin: 0 auto;
}

.icon__add {
  grid-column-end: 4;
}

.icon__add__button {
  font-size: 20px;
}

.icon__remove {
  grid-column-end: 3;
}

.icon__remove > button {
  width: 100%;
  outline: none;
  font-size: 20px;
}
  
.phone__number__button,
.icon__add__button,
.icon__remove__button {
    padding: 0;
    text-align: center;
    border-style: none !important;
    color: rgb(0, 131, 143) !important;
    background: #ffffff !important;
  }
  
.phone__number__svg {
    grid-column-start: 1;
  }
  
.phone__number__plus {
    font-size: 20px;
  }
  
.phone__number__input {
    width: 352px;  
    grid-column-end: 4;
    border-bottom: 1px solid gray;
  }
  
.phone__number__input > input {
    width: 100%;
    border-style: none;
    outline: none;
  }
<template>
  <div>
    <div>
      <b-navbar style="background-color:#00838f;">
        <b-nav-form>
          <b-form-input class="mr-sm-2" placeholder="Name"></b-form-input>
          <b-button variant="outline-info" class="my-2 my-sm-3" type="search">Search</b-button>
        </b-nav-form>
      </b-navbar>
    </div>

    <div class="add-contact">
        <svg v-b-modal.modal-1 width="3em" height="3em" viewBox="0 0 16 16" class="icon__svg bi bi-plus" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
        </svg>
      
            <!-- Начало контент номер телефона -->
      <div>
        <b-modal id="modal-1" title="Новый контакт" no-close-on-esc no-close-on-backdrop hide-header-close>
        
          <div class="container__phone">
            <div class="phone__text">
              Telephone
            </div>
            <div class="icon__add">
              <b-button type="button" class="icon__add__button"><b>+</b></b-button>
            </div>
          </div>

          <div class="container__phone">
            <div class="container__phone__number">

              <div  class="phone__number">
                <div class="phone__number__button">
                  <div class="phone__number__svg">
                    <svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-telephone-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" d="M2.267.98a1.636 1.636 0 0 1 2.448.152l1.681 2.162c.309.396.418.913.296 1.4l-.513 2.053a.636.636 0 0 0 .167.604L8.65 9.654a.636.636 0 0 0 .604.167l2.052-.513a1.636 1.636 0 0 1 1.401.296l2.162 1.681c.777.604.849 1.753.153 2.448l-.97.97c-.693.693-1.73.998-2.697.658a17.47 17.47 0 0 1-6.571-4.144A17.47 17.47 0 0 1 .639 4.646c-.34-.967-.035-2.004.658-2.698l.97-.969z"/>
                    </svg>
                  </div>
                  <div class="phone__number__plus">+</div>
                  <div class="phone__number__input"><input auto-grow type="tel" placeholder="__ (___) ___ __ __" maxlength="12"/></div>
                </div>
              </div>
              
              <div class="icon__remove">
                <b-button type="reset" class="icon__remove__button"><b>-</b></b-button>
              </div>

            </div>
          </div>
            <!-- Конец контент номер телефона -->

            <!-- Начало контент эмейла -->
          <div class="container__phone">
            <div class="phone__text">
              Email
            </div>
            <div class="icon__add">
              <b-button type="button" class="icon__add__button"><b>+</b></b-button>
            </div>
          </div>

          <div class="container__phone">
            <div class="container__phone__number">

              <div  class="phone__number">
                <div class="phone__number__button">
                  <div class="phone__number__svg">
                    <svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-envelope-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555zM0 4.697v7.104l5.803-3.558L0 4.697zM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586l-1.239-.757zm3.436-.586L16 11.801V4.697l-5.803 3.546z"/>
                    </svg>
                  </div>
                  <div class="phone__number__plus phone__number__plus__email"> </div>
                  <div class="phone__number__input"><input auto-grow type="email" placeholder="example: [email protected]" maxlength="12"/></div>
                </div>
              </div>
              
              <div class="icon__remove">
                <b-button type="reset" class="icon__remove__button"><b>-</b></b-button>
              </div>

            </div>
          </div>
          <!-- Конец контент эмейла -->

          <!-- Начало контент адрес -->
          <div class="container__phone">
            <div class="phone__text">
              Address
            </div>
            <div class="icon__add">
              <b-button type="button" class="icon__add__button"><b>+</b></b-button>
            </div>
          </div>

          <div class="container__phone">
            <div class="container__phone__number">

              <div  class="phone__number">
                <div class="phone__number__button">
                  <div class="phone__number__svg">
                    <svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-house-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" d="M8 3.293l6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6zm5-.793V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
                      <path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"/>
                    </svg>
                  </div>
                  <div class="phone__number__plus phone__number__plus__email"> </div>
                  <div class="phone__number__input"><input auto-grow type="tel" placeholder="address" maxlength="12"/></div>
                </div>
              </div>
              
              <div class="icon__remove">
                <b-button type="reset" class="icon__remove__button"><b>-</b></b-button>
              </div>

            </div>
          </div>
            <!-- Конец контент адрес -->
        </b-modal>
      </div>
    </div>
   </div>
</template>


Источник

Ответы (1 шт):

Автор решения: t0lik

Не заметил ни строчки с сохранением коллекций куда-либо. Для начала попробуйте сохранять в localStorage хотя бы напрямую, потом уже можете обернуть это сохранение с помощью vuex.

→ Ссылка

licensed under cc by-sa 3.0 with attribution.