Question

所以我有一个laravel应用程序从服务器获取数据并将其显示在textarea中。我希望textarea在数据从服务器返回时以递增方式更新（不进行缓冲）。现在它等待直到收到所有数据，然后更新文本区域。更多细节：

有一个vue函数可以更新laravel应用程序中的文本区域。它在以下大部分的这一行上完成：

axios.post('/' + task + '/' + websiteid, this.$data).then(function (response) {                
return _this3.comment_body += '|------  ' + task + ' output  ---->\n' + response.data;

new Vue({
    el: '#app',

    data: {
        comment_body: '', 
        updated: false,
        errors: new Errors(),
        commandoutput: new CommandOutput(),
        pending_response: false,
        prefix: 'example',
        updating: false
    },
    mounted: function mounted() {
        window.onbeforeunload = this.leaving;
        // window.onblur = this.leaving;
        // window.onmouseout = this.leaving;
    },

    methods: {
        onSubmitUpdate: function onSubmitUpdate(websiteid) {
            var _this = this;

            // eventually hook this thing up
            this.$data.loading = true;
            this.$data.updating = true;
            axios.post('/websites/' + websiteid + '/updates', this.$data).then(function (response) {
                return location.reload(); 
            }).catch(function (error) {
                return _this.errors.record(error.response.data.errors);
            });
        },
        saveProgress: function saveProgress(websiteid) {
            var _this2 = this;

            axios.post('/websites/' + websiteid + '/save', this.$data).then(function (response) {
                return location.reload();
            }).catch(function (error) {
                return _this2.errors.record(error.response.data.errors);
            });
        },
        onCommand: function onCommand(task, websiteid) {
            var _this3 = this;

            axios.post('/' + task + '/' + websiteid, this.$data).then(function (response) {                
                return _this3.comment_body += '|------  ' + task + ' output  ---->\n' + response.data;
            }).catch(function (error) {
                return _this3.errors.record(error.response.data.errors);
            });
        },
        leaving: function leaving() {
            if (document.getElementById("update-comment").value.trim() !== "" && this.$data.updated == false) {
                return true;
            }
        }
    }
});

这是它更新的文本区域：

<textarea name="comment_body" id="update-comment" placeholder="output goes here, feel free to notate" rows="10" class="update-comment"></textarea>

这是从服务器获取数据的php代码

var_dump( "something1");
echo "$command";
$this->process_wrapper($command);
echo "something4";


public function process_wrapper($cmd, $data = null)
{
    $descr = array(
        0 => array(
            'pipe',
            'r'
        ) ,
        1 => array(
            'pipe',
            'w'
        ) ,
        2 => array(
            'pipe',
            'w'
        )
    );
    $pipes = array();
    echo "something2";
    //ob_flush();
    flush();
    echo "something3";
    $process = proc_open($cmd, $descr, $pipes,realpath('./'),array());
    if (is_resource($process)) {
        while ($f = fgets($pipes[1])) {
            echo $f;
            //ob_flush();
            flush();
        }
    }
}

每当我取消注释这两个ob_flush（）调用之一时，它会给我一个错误并说我没有缓冲区。这很好，我不想要任何缓冲区，我希望一旦它被回显或产生就显示出来。

然而，Vue等待一切都完成然后立即显示所有内容（无论是在var_dump或echo语句中还是来自服务器的数据）如果在没有缓冲的情况下运行，我将如何显示PHP中的所有内容？我已经使用此脚本https://www.jeffgeerling.com/blog/2016/streaming-php-disabling-output-buffering-php-apache-nginx-and-varnish测试了我的apache缓冲，这不是问题所在。我之前没有使用过Vue。感谢。

编辑：由于php中的echo语句直到后来都没有显示，我认为某处某种缓冲区正在捕获echo语句的所有输出并等待显示它们直到＆＃34; onCommand＆＃34;运行Vue中的方法。我在应用程序的另一部分中发现了这一点，但我不确定这是否与它有关：

/**
 * Runs when a command is due to be sent.
 *
 * @param Swift_Transport_SmtpAgent $agent            to read/write
 * @param string                    $command          to send
 * @param int[]                     $codes            expected in response
 * @param string[]                  $failedRecipients to collect failures
 * @param bool                      $stop             to be set true  by-reference if the command is now sent
 */
public function onCommand(Swift_Transport_SmtpAgent $agent, $command, $codes = array(), &$failedRecipients = null, &$stop = false);

编辑：这可能是相关的：

/**
 * Run a command against the buffer, expecting the given response codes.
 *
 * If no response codes are given, the response will not be validated.
 * If codes are given, an exception will be thrown on an invalid response.
 *
 * @param string   $command
 * @param int[]    $codes
 * @param string[] $failures An array of failures by-reference
 *
 * @return string
 */
public function executeCommand($command, $codes = array(), &$failures = null)
{
    $failures = (array) $failures;
    $stopSignal = false;
    $response = null;
    foreach ($this->getActiveHandlers() as $handler) {
        $response = $handler->onCommand(
            $this, $command, $codes, $failures, $stopSignal
            );
        if ($stopSignal) {
            return $response;
        }
    }

    return parent::executeCommand($command, $codes, $failures);
}

（实际上这似乎根本没有运行）

编辑：一个同事实际使用socket.io修复此问题，使用redis适配器显示数据，一旦我有时间就会发布修复。

Answer 1

我不太明白你要做什么，而且我还没有阅读你的PHP文件，但你应该将comment_body数据绑定到你的输入（textarea），Vue使用v-使这成为可能模型 - 很像Angular。 <textarea v-model="comment_body"></textarea>

此外，数据必须是一个功能。而不是

data: {
 comment_body: ''
}

一定是

data() {
 return {
  comment_body: ''
 }
}

创建Vue函数来更新textarea而不进行缓冲

1 个答案: