如何在刀片中访问 axios 响应 - laravel 视图答案

【问题标题】：how to access axios response in blade - laravel view如何在刀片中访问 axios 响应 - laravel 视图
【发布时间】：2020-03-25 14:00:53
【问题描述】：

如何从blade文件中的vue组件访问axios结果？我也尝试在 'app' div 中访问 {{value}}。但错误仍然存在。我想根据 axios 响应的值生成部分视图。

IssueComponent.vue

<template>
<div>
<div class="form-group">
  <label>Enter Accession No</label>
  <input
    type="text"
    name="accession_no"
    placeholder="Accession No"
    class="form-control"
    v-on:keyup.enter="getData()"
    v-model="query"
  />
</div>
<div>
  <button class="btn btn-info" @click.prevent="getData()">Check</button>
</div>
</template>

<script>
export default {
data() {
return {
  query: "",
  value: []
 };
},
 methods: {
 getData: function() {
  var self = this;
  axios
    .get("/issue-getdata", { params: { q: self.query } })
    .then(function(response) {
      self.value = response.data;
    })
    .catch(function(error) {
      console.log(error);
    })
    .then(function() {
    });
 }
}
};
</script>

create.blade.php

<form action="/issue" method="POST">

<div id="app">
    <issue-component></issue-component>
</div>
{{value}}  ///////// Undefined constant error
<button type="submit" class="button-btn btn-success">Submit</button>
@csrf
</form>

控制器方法

public function getData(Request $request){
    $input = $request->q;
    $acsNo = preg_replace("/[^0-9]/", "", $input);
    $acsNoIssued =  Issue::where('accession_no', '=', $acsNo)->where('is_returned', null)->orwhere('is_returned', 0)->first();
    return response()->json($acsNoIssued);        
}

错误

Facade\Ignition\Exceptions\ViewException
Use of undefined constant value - assumed 'value' (this will throw an Error in a future version of PHP) (View: D:\ProgrammingSSD\laragon\www\ulclibrary\resources\views\issues\create.blade.php)

【问题讨论】：

标签： laravel vue.js

【解决方案1】：

你不能。 Blade 呈现在服务器端。当您的 vue 组件发出请求时，该 {{ $value }} 已经被解析并且现在是您视图的静态部分。

您可以做的是将状态（信息）保存在 VUE 中，并使用另一个显示信息的 VUE 组件（而不是刀片）读取它。

vue 中的状态指南 https://vuex.vuejs.org/guide/state.html

<form action="/issue" method="POST">

<div id="app">
    <issue-component></issue-component>
</div>
<display-component-value></display-component-value>  // Vue component that reads the state you want
<button type="submit" class="button-btn btn-success">Submit</button>
@csrf
</form>

【讨论】：