创建Vue函数以更新文本区，而无需缓冲
因此，我有一个laravel应用程序，它从服务器获取数据并将其显示在文本区域中。当数据从服务器返回时，我希望文本区域以增量方式更新(没有缓冲)。现在，它等待所有数据接收完毕，然后更新文本区。更多详细信息：
有一个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适配器显示数据，一旦我有时间就会发布修复。
回答 1
Stack Overflow用户
发布于 2018-05-30 21:22:52
我不太明白你想做什么，我也没有读过你的PHP文件，但你应该把comment_body数据绑定到你的输入(文本区域)，Vue通过使用v-model实现了这一点--就像Angular一样。<textarea v-model="comment_body"></textarea>
另外，数据必须是一个函数。因此，不是
data: {
comment_body: ''
}它一定是
data() {
return {
comment_body: ''
}
}https://stackoverflow.com/questions/50605184
复制相似问题