創建Vue函數以更新文本區域而無需緩沖

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語句的所有輸出並等待顯示它們，直到在Vue中運行“ onCommand”方法為止。 我在應用程序的另一部分中找到了這個，但是我不確定這是否與它有關：

/**
 * 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數據綁定到您的輸入（文本區域），Vue通過使用v-model使這成為可能-很多像Angular。 <textarea v-model="comment_body"></textarea>

同樣，數據必須是一個函數。 所以代替

data: {
 comment_body: ''
}

一定是

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