Vue.js Axios.post отправляет переменные в php, но я не могу получить доступ к этим переменным

Question

Я новичок в разработке веб-интерфейса и столкнулся с проблемой, которую не могу решить.

Я пытаюсь открыть новую всплывающую HTML-страницу с параметрами (которую я могу передать в виде массива), вызвав метод axios.post из моего файла vue.js.

Я погуглил возможные решения, но так и не смог найти источник проблемы. Наблюдая за консолью Chrome, я подозреваю, что axios.post работает нормально, так как говорит:

data: "Array ([index_id] => 1 [log_id] => 63)… ow.print (); // }); ", status: 200, statusText:" OK ", заголовки: {…}, Config: {…},…}

Однако во всплывающем окне я не могу получить доступ к переменным, или они null.

Следующий код является функцией в моем vue.js:

printTransaction: function(index){
    // I have tried this but could not figure out
    // var formData = new FormData();
    // formData.append('index_id', index);
    //
    // axios.post('/popup/popup_output_print.php', {
    //     index_id: index,
    // })
    // .then(function(response){
    //   console.info(response);
    // })
    // .catch(function(error) {
    //   console.error(error);
    // })

    // and this too :(
    const params = {
        index_id: index,
        log_id: logId,
    };

    axios.post('/popup/popup_output_print.php', params, {
        headers: {
            'content-type': 'application/json',
        },
    })
    .then(function(response) {
        console.info(response);
    })
    .catch(function(error) {
        console.error(error);
    })

    let newWin = window.open('/popup/popup_output_print.php');
    setTimeout(function() {
        newWin.print();
        //newWin.close();
    }, 2000);
}

И это самая первая часть popup_output_print.php

<?php require("../_/inc/init.php");
    $data = json_decode(file_get_contents("php://input"), TRUE);
    $index_id = $data['index_id'];
    $log_id = $data['log_id'];

    print_r($data);
?>
...
//Trying to print the value

<?php
    if($index_id == null) {
        echo "index_id is null";
    }
    else {
        echo $index_id;
    }
?>

Затем всплывающее окно печатает index_id is null

Что я делаю не так?

ОБНОВЛЕНИЕ: после комментария я только что попробовал var_dump, и все переменные null. (

Answer 1

То, что происходит, это то, что axios.post совершенно не влияет на window.open :

let newWin = window.open('/popup/popup_output_print.php');

это делает запрос GET без параметров.

На мой взгляд, лучший подход - использовать что-то вроде Vue modal , т. Е.

axios(...).then( response => openVueModal(response.data))

Если вы предпочитаете опцию window.open, вы можете передавать переменные как параметры GET:

let newWin = window.open(`/popup/popup_output_print.php?index_id=${index}&log_id=${logId}`);

Затем вам нужно будет изменить бэкэнд, чтобы читать переменные с $_GET.

Другое решение может заключаться в том, чтобы поместить axios.post в шаблон открытия окна, чтобы он запрашивал необходимые переменные после открытия.