[英]How to get the value from input without using v-model in Vue.js?
有這樣你點擊“ 添加筆記 ”按鈕的example.When,它檢查輸入是否為空,並增加了文本輸入到輸入塊。
如何在不使用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);
}
}
}
根據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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.