title: How to get the value from input without using v-model in Vue.js?
body: <p>There is such an example.When you click on the "<strong>add note</strong>" button, it checked whether the <strong>input</strong> is empty or not and adds a block with text entered into the <strong>input</strong>.</p>
  
  <p>How to make the same example without using v-bind because it does not work in framework7?</p>
  
  <p>Tried to do something like that but it doesn't work.</p>
  
  <pre><code>et getCat = document.getElementByClassName('inputCat').value;
  let newCat = this.getCat;
  this.cats.push(this.newCat);
  this.newCat = '';
  this.saveCats();
  </code></pre>
  
  <p><strong>A working example with v-model</strong></p>
  
  <pre><code>  &lt;f7-block v-for="(cat, n) in cats"&gt;
        &lt;span class="cat"&gt;{{ cat }}&lt;/span&gt;
        &lt;f7-button fill color="red" @click="removeCat(n)"&gt;Удалить&lt;/f7-button&gt;
    &lt;/f7-block&gt;
  
      &lt;f7-list form&gt;
          &lt;f7-list-input
            class="inputCat"
            v-model="newCat"
            type="text"
            placeholder="Заметка"
          &gt;&lt;/f7-list-input&gt;
          &lt;f7-button fill color="blue" @click="addCat"&gt;Добавить заметку&lt;/f7-button&gt;
      &lt;/f7-list&gt;
  
  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);
    }
  }
  }
  </code></pre>