Question

我有这个VueJS代码片段和一个内部提取功能，可以成功提取笑话，并打算用它填充div，但是我注意到了一些

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

    function postdata(app){
        var initial_data = {'id': 1, 'model-name': 'Joke'}
        var self = this;
        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) => { console.log(json['jokes'])
                app.jokes.push(json['jokes'])
            })
    }

    postdata(app)
};

响应笑话中有一个数组，里面有一个dict，其中包含key，text和name的密钥对值。

但是仔细查看为什么似乎什么也没填的情况我已经在控制台上记录了相同的内容。（“检查”元素中“网络”标签中的先前图像）

现在，字典中的每个元素都有一个get和set是可反应的。如何将其转换为JSON。

请注意，我已尝试登录控制台app.jokes，并返回undefined。

Answer 1

在DOM中使用滞留Vue方法

new Vue({
    el: '#app',
    data: {
      title: '',
      message: ''
    },
    mounted: function() {
      this.postdata()
    },
    methods: {
        postdata(){
            var initial_data = {'id': 1, 'model-name': 'Joke'}
            var self = this;
            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) => { console.log(json['jokes'])
                    this.jokes.push(json['jokes'])
                })
        }
    }
  })

VueJS：获取数据到Vue

1 个答案: