[英]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.