Как получить значение из ввода без использования v-модели в Vue.js? - PullRequest
Новая
       29

Как получить значение из ввода без использования v-модели в Vue.js?

0 голосов
/ 15 апреля 2019

Вот такой пример. Когда вы нажимаете кнопку « добавить заметку », он проверяет, пуст ли ввод или нет, и добавляет блок с текстом, введенным в input .

Как сделать тот же пример без использования v-bind, потому что он не работает в framework7?

Попытался сделать что-то подобное, но это не такработа. 

et getCat = document.getElementByClassName('inputCat').value;
let newCat = this.getCat;
this.cats.push(this.newCat);
this.newCat = '';
this.saveCats();

Рабочий пример с v-моделью 

  <f7-block v-for="(cat, n) in cats">
      <span class="cat">{{ cat }}</span>
      <f7-button fill color="red" @click="removeCat(n)">Удалить</f7-button>
  </f7-block>

    <f7-list form>
        <f7-list-input
          class="inputCat"
          v-model="newCat"
          type="text"
          placeholder="Заметка"
        ></f7-list-input>
        <f7-button fill color="blue" @click="addCat">Добавить заметку</f7-button>
    </f7-list>

export default {
data() {
    return{
        cats:[],
        newCat: null
  }
},
mounted() {
  if (localStorage.getItem('cats')) {
    try {
      this.cats = JSON.parse(localStorage.getItem('cats'));
    } catch(e) {
      localStorage.removeItem('cats');
    }
  }
},
methods: {
  addCat() {
    // убедиться, что было что-либо введено
    if (!this.newCat) {
      return;
    }
    this.cats.push(this.newCat);
    this.newCat = '';
    this.saveCats();
  },
  removeCat(x) {
    this.cats.splice(x, 1);
    this.saveCats();
  },
  saveCats() {
    const parsed = JSON.stringify(this.cats);
    localStorage.setItem('cats', parsed);
  }
}
}

1 Ответ

1 голос
/ 15 апреля 2019

Согласно документации Framework7 используется событие @input. 

export default {
  data() {
    newCat: null;
  }
}
   <template>
    <f7-list form>
        <f7-list-input
          class="inputCat"
          :value="newCat"
          @input="newCat = $event.target.value"
          type="text"
          placeholder="Заметка"
        ></f7-list-input>
        <f7-button fill color="blue" @click="addCat">Добавить заметку</f7-button>
    </f7-list>
    </template>
...