vue中无法显示数据答案

【问题标题】：Displaying data is not possible in vuevue中无法显示数据
【发布时间】：2020-09-28 07:19:56
【问题描述】：

我将这个数据发送到视图部分，写在视图中但不显示，你觉得呢？

$itemsCount = DB::table('items')
    ->groupBy('level_id')
    ->selectRaw('level_id, count(*) as type');

$ItemsMdCount = DB::table('items')
    ->groupBy('project_model_id')
    ->selectRaw('project_model_id, count(*) as type');

return view('project.view',  compact('users', 'itemsCount', 'itemsMdCount'));

我在 vue 中显示 {{ itemsCount }}

如何将数据发送到 Vue.js 并显示？

我尝试了 AJAX 请求，但我不知道如何正确使用 axios。我没有使用太多 vue，我仍然有顾虑，如果你能给我一个提示，我如何使用第一个选项显示会非常酷。

Route::get('/get-items-count-id/{modelId}', 'Ajax\AjaxController\getIemsCount')->name('getItemsCount');
Route::get('/get-items-md-count/{modelId}', 'Ajax\AjaxController\getItemsMdCount')->name('getItemsMdCount');

public function getItemsCount($modelId) 
{
    $itemsCount = Item::where('project_model_id', $modelId)
        ->groupBy('level_id')
        ->selectRaw('level_id, count(*) as type')->get();

    return $this->successResponse($itemsCount);
}
    
public function getItemsMdCount($modelId) 
{
    $itemsMdCount = Item::where('project_model_id', $modelId)
        ->groupBy('project_model_id')
        ->selectRaw('project_model_id, count(*) as type')->get(); 
 
    return $this->successResponse($itemsMdCount);                
}

【问题讨论】：

标签： javascript php laravel vue.js

【解决方案1】：

按照这些步骤来包含 axios。

第 1 步：npm install --save axios

第 2 步：创建一个“axios-auth.js”文件并粘贴此代码

import axios from 'axios'

const instance = axios.create({
  baseURL: 'http://localhost:3000'
});

export default instance

第 3 步：在 store.js 中包含 import axios from './axios-auth'

第 4 步：您可以使用 vuex 进行 API 调用

第五步：在vuex Actions属性中可以调用API，如下图

signUp({ commit, dispatch }, authData) {
      return axios.post('/register', authData)
    }

第 6 步：您可以使用

this.$store.dispatch('signUp', formData)

将在页面上从 API 请求。

你可以在这里了解更多关于 vuex 的信息https://vuex.vuejs.org/

【讨论】：

【解决方案2】：

itemsMdCount:[], 

getItemsCount() 
      {
        window.axios.get(`/get-items-md-count/${this.model.id}`).then(response({
          this:itemsMdCount = response.data.itemsMdCount
        }));
  },

【讨论】：