Question

我有这个VueJS代码，它具有一个postdata方法，该方法链接到按钮的单击<button class="btn btn-primary" v-on:click="postdata">Refresh</button>

window.onload = function () {
    var app = new Vue({
      delimiters: ['[[', ']]'],
      el: '#app',
      data: {
        jokes: [],

        joke_id: 1,
        dadjokes_id: 1,
        tweet_id: 1,
      },
      methods: {
        postdata: function (retrieve_data = []){
            initial_data = {'id': 1, 'model-name': 'Joke'}

            if (retrieve_data) {
                initial_data = retrieve_data
                console.log(initial_data)
            }

            fetch("\start-jokes\/", {
                body: JSON.stringify(initial_data),
                cache: 'no-cache', 
                credentials: 'same-origin', 
                headers: {
                    'user-agent': 'Mozilla/4.0 MDN Example',
                    'content-type': 'application/json'
                },
                method: 'POST',
                mode: 'cors', 
                redirect: 'follow',
                referrer: 'no-referrer',
                })
                .then(response => response.json()).then((json) => {
                    this.jokes.push(...json['jokes'])
                })
        }
    }
    });
};

由于我想将一些数据传递给该函数，因此我一直在寻找解决其错误的方法。我尝试记录initial_data（如果已更改）。记录鼠标点击

MouseEvent {isTrusted: true, screenX: 1166, screenY: 216, clientX: 1156, clientY: 129…}

具有x，y位置，但现在会使函数失败。使用它的正确方法是什么？

Answer 1

您是否可以访问模板代码中的“ retreive_data”对象？因为只要您可以访问参数，就可以很轻松地传递参数。以下是传递简单对象的方法：

  <button v-on:click="postdata({ str: 'Hey'})">
    Click me
  </button>

在您的JS中：

new Vue({
 el: "#app",
  ...
  methods: {
    postdata: function(obj) { // the Object wie pass in v-on:click
        alert(obj.str); // Alerts "Hey"
    }
  }
})

如果您无法访问模板中的数据，请在数据中使用一个字段来存储所需的数据。

更新：如果您不想获取鼠标事件，但是没有任何数据要传递，请执行一个空函数调用：

 <button v-on:click="postdata()">
    Click me
 </button>

retreive_data将是一个空数组。

VueJS将初始值传递给方法中的函数

1 个答案: