Saya agak bingung bagaimana cara mengirim 2 params untuk mendengarkan acara di Javascript, vuejs. Saya mencoba mengedit data input ketika keyup===13(masuk) acara, tetapi saya tidak tahu cara mengirim acara dengan nilai .. ketika saya mengirim 2 params, itu tetap mengatakan acara bukan fungsi.

Jadi saya membuat 2 metode untuk setiap acara mendengarkan. 1. klik : untuk mendapatkan daftar buku masing-masing 2. keyup===13 : untuk menyimpan data

Ada ide..? bagaimana menghadapi ini dalam 1 metode?

Data

let books = new Map();
books.set('1910', {
    'park': { userName: 'park', bookTitle: 'book1', bookThumbnail: 'book1', bookUrl: 'book1' },
    'ryu': { userName: 'ryu', bookTitle: 'book2', bookThumbnail: 'book2', bookUrl: 'book2' },
    'lee': { userName: 'lee', bookTitle: 'book3', bookThumbnail: 'book3', bookUrl: 'book3' }
})

Komponen utama buku

<template>
  <v-container>
...
  <tbody>
          <tr v-for="book in books" :key="book.userName" :class="setCss.textAlign">
            <td>{{book.userName}}</td>
            <td>
              <input type="text" :value="book.bookTitle" @click="getUser(book)" @keyup="save" />
            </td>
            <td>{{book.bookThumbnail}}</td>
            <td>{{book.bookUrl}}</td>
          </tr>
        </tbody>
      </template>
    </v-simple-table>
  </v-container>
</template>

Naskah

  computed: {
    books: function() {
      let books = this.$store.getters.getBooks;
      let month = this.date;

      let a = books.get(month);

      return a;
    }
  },

Metode

  methods: {
    save: function(event) {
      event.preventDefault();

      if (event.keyCode === 13) {
        console.log(1);

      }

    },

    getUser: function(book) {
      //   console.log(book);

      var editedUsername = book.userName;
      var editedBookTitle = event.target.value;
      var editeBookThumbnail = book.bookThumbnail;
      var editedBookUrl = book.bookUrl;

      var item = new Object();
      item.userName = editedUsername;
      item.bookTitle = editedBookTitle;
      item.bookThumbnail = editeBookThumbnail;
      item.bookUrl = editedBookUrl;

      console.log(item);
      return item;
    }
  }
0
Chawchawchaw 28 Oktober 2019, 11:27

2 jawaban

Jawaban Terbaik
new Vue({
  el: '#app',
  data() {
    return {
      book: {
        bookTitle: 'title'
      }
    }
  },
  methods: {
    getUser(e, book) {
      console.log(book);
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app">
  <input type="button" :value="book.bookTitle" @click="getUser($event,book)" />
</div>
1
sugars 28 Oktober 2019, 09:19

Berdasarkan jawaban ini. Jika Anda ingin mendapatkan acara dalam metode getUser Anda, gunakan $event dalam penjilidan Anda. Seperti ini:

<td>
  <input type="text" :value="book.bookTitle" @click="getUser(book, $event)" @keyup="save" />
</td>
0
Stutje 28 Oktober 2019, 09:16