javascript - VUE JS - 我的一些方法在没有我调用的情况下被调用
问题描述
我在使用 Vue JS 时遇到了一个烦人的问题 >.< 我的方法在未经我同意的情况下被调用。我基本上有一个执行方法的按钮,但是method
当执行其他方法时执行,这很烦人......
这是我的表格
<form class="row">
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 pr-xl-0 pr-lg-0 pr-md-0 m-b-30">
<div class="product-slider">
<img class="d-block" :src="image" alt="First slide" width="285" height="313">
Image URL <input type="text" @focusout="showPicture" id="imageLink">
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 pl-xl-0 pl-lg-0 pl-md-0 border-left m-b-30">
<div class="product-details">
<div class="border-bottom pb-3 mb-3">
<h2 class="mb-3">
<input type="text" value="Product Name" minlength="4" id="name" required/>
</h2>
<h3 class="mb-0 text-primary">$<input type="number" value="1.00" step="0.01" id="price" required></h3>
</div>
<div class="product-size border-bottom">
<h4>Provider</h4>
<input type="text" value="Pro Inc." minlength="3" id="provider" required>
<div class="product-qty">
<h4>Quantity</h4>
<div class="quantity">
<input type="number" value="1" id="quantity" required>
</div>
</div>
</div>
<div class="product-description">
<h4 class="mb-1">Description</h4>
<textarea rows="4" cols="50" minlength="50" id="description" required>Sample Text</textarea>
<button :onclick="addProduct()" class="btn btn-primary btn-block btn-lg">Add to inventory</button>
</div>
</div>
</div>
</form>
and here is my full script
<script>
const DB_NAME = 'DBInventory';
const DB_VERSION = 1;
export default {
data: function() {
return {
db:null,
ready:false,
addDisabled:false,
image: "https://i.imgur.com/O9oZoje.png",
};
},
async created() {
this.db = await this.getDb();
this.ready = true;
},
methods: {
showPicture() {
let link = document.getElementById("imageLink").value;
if(link !== "")
this.image = link;
},
async getDb() {
return new Promise((resolve, reject) => {
let request = window.indexedDB.open(DB_NAME, DB_VERSION);
request.onerror = e => {
console.log('Error opening db', e);
reject('Error');
};
request.onsuccess = e => {
resolve(e.target.result);
};
request.onupgradeneeded = e => {
console.log('onupgradeneeded');
let db = e.target.result;
let objectStore = db.createObjectStore("products", { autoIncrement: true, keyPath:'id' });
console.log(objectStore);
};
});
},
async addProduct() {
this.addDisabled = true;
let product = {
name: document.getElementById("name").value,
provider: document.getElementById("provider").value,
price: document.getElementById("price").value,
quantity: document.getElementById("quantity").value,
description: document.getElementById("description").value,
image: document.getElementById("imageLink").value,
};
console.log('about to add '+JSON.stringify(product));
await this.addProductToDb(product);
this.addDisabled = false;
},
async addProductToDb(product) {
return new Promise((resolve, reject) => {
//delete me
console.log(reject);
let trans = this.db.transaction(['products'],'readwrite');
trans.oncomplete = e => {
//delete me
console.log(e);
resolve();
};
let store = trans.objectStore('products');
store.add(product);
});
},
}
}
</script>
当您不专注于图像输入字段时,我的一种方法会执行。它有效,但也执行 addProduct(),它将我的项目推送到我的 indexDB,我只想在按下“添加到库存”按钮时发生这种情况。
这非常令人困惑,我对 Vue JS 有点菜鸟^^'(我使用 Vue 3)
解决方案
推荐阅读
- pine-script - pivothigh() 和 pivotlow() 函数如何在 Tradingview Pinescript 上工作?
- java - 如何使用 Electron 通过 JDBC 连接到 MySQL 数据库
- google-docs - 嵌入的内容不显示;GoogleDocs 查看器返回 204
- python - 你不能将整数附加到python中的列表吗?
- python - xlwings 将值设置为带等号 (=) 而非公式的字符串
- c++ - 嵌套堆分配如何在 C++ 中工作?
- python - 在 Dynamo DB 中处理 nan 值 - AWS
- vba - 在文本框中输入文本时启用按钮
- r - 如何修复错误“找不到函数“setnafill””
- visual-studio-code - 无法使用 VSCode 在远程服务器中打开现有的 jupyter 笔记本