VUE JS - 我的一些方法在我没有调用它们的情况下被调用

Question

我在使用 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）

Answer 1

为避免函数自动执行，您需要在函数声明中提供onclick 方法。试试下面的代码。我不使用 Vue，但它适用于 React。 Javascript 无论如何。

:onclick="() => addProduct()"

Answer 2

你的语法有误 :onclick="addProduct()"

:onclick 应该是 @click 或 v-on:click

https://vuejs.org/v2/guide/events.html

Answer 3

vue 中点击事件的正确语法完整语法

<a v-on:click="addProduct"></a>

shorthand语法

<a @click="addProduct"></a>

然后调用方法addProduct

addProduct: function () {
      ...
    }

VUE JS - 我的一些方法在我没有调用它们的情况下被调用

VUE JS - Some of my methods are being called without me calling them

javascript

forms

indexeddb

vue.js