How to get the value from input without using v-model in Vue.js?

Question

There is such an example.When you click on the "add note" button, it checked whether the input is empty or not and adds a block with text entered into the input.

How to make the same example without using v-bind because it does not work in framework7?

Tried to do something like that but it doesn't work.

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

A working example with v-model

  <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);
  }
}
}

Bryce Howitson · Accepted Answer · 2019-04-15 20:24:27Z

1

According to the Framework7 documentation the @input event is used.

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>

answered Apr 15, 2019 at 20:24

Bryce Howitson

7,78824 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dio Over a year ago

Please tell me how to transfer this expression newCat = $event.target.value from input to the code itself, leaving only newCat in the input. Like this @input="newCat"

Bryce Howitson Over a year ago

@input is a javascript expression. Its basically a shortcut for input.onChange() so its setting the data object newCat to the value of the input. You access the variablenewCat that is being reset everytime the input changes. The combo of :value and @input replaces v-model in Framework7

Collectives™ on Stack Overflow

How to get the value from input without using v-model in Vue.js?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related