0

我试图获取数据，但它说计算方法在 vue 开发工具中未定义我的方法是

<script>
export default{
    name:"about",
        mounted(){
            this.$store.dispatch('getFrontAbouts');
        },
        computed:{
            about(){
                return this.$store.getters.about;
            }
        },
}
</script>

我通过 axios 调用获取这些数据的 store2.js 文件

export default{
      state: {
      aboutData:[],
  },
  getters:{
    about(state){
      return state.aboutData;
    },
    },
  actions:{
      getFrontAbouts(data){
      axios.get("get-front-about").then((response)=>{
        data.commit('about',response.data.about);
      }).catch((error)=>{

      })
    },
  },
  mutations: {
    about(state,data){
      return state.aboutData = data;
    },
  }
}

我正在获取数据的控制器文件

公共函数 about(){

$about = About::where('publication_status',1)->orderBy('id','ASC')->take(1)->first();
return response()->json(['about',$about],200);

}

这是我的 vue 组件，其中计算了正在执行的方法

<div class="row topmargin bottommargin gutter-lg-50 align-items-center">
                        <div class="col-lg-12 p-lg-5">
                            <div class="heading-block border-bottom-0 mb-0">
                                <h2 class="nott font-weight-semibold mb-4 text-secondary" style="color: #1ABC9C;">Our Story</h2>
                                <p v-if="about">{{about.about_us}}</p>
                                <div class="row">
                                    <div class="col-6 col-sm-6 mb-4">
                                        <div class="counter color font-weight-semibold"><span data-from="1" data-to="3" data-refresh-interval="2" data-speed="600"></span>+</div>
                                        <h5 class="mt-0 font-weight-medium">Branches</h5>
                                    </div>

                                    <div class="col-6 col-sm-6 mb-4">
                                        <div class="counter color font-weight-semibold"><span data-from="1" data-to="37" data-refresh-interval="11" data-speed="900"></span>+</div>
                                        <h5 class="mt-0 font-weight-medium">Single Studios</h5>
                                    </div>

                                    <div class="col-6 col-sm-6 mb-4">
                                        <div class="counter color font-weight-semibold"><span data-from="1" data-to="21" data-refresh-interval="3" data-speed="1000"></span>+</div>
                                        <h5 class="mt-0 font-weight-medium">Events per Month</h5>
                                    </div>

                                    <div class="col-6 col-sm-6 mb-4">
                                        <div class="counter color font-weight-semibold"><span data-from="100" data-to="4500" data-refresh-interval="100" data-speed="1500"></span>+</div>
                                        <h5 class="mt-0 font-weight-medium">Active Members</h5>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div>

                    <div class="row justify-content-center topmargin-sm">
                        <div class="col-md-5 offset-md-1">
                            <h3 class="text-dark"><i class="icon-line-circle-check color mr-1 position-relative" style="top: 2px;color: #1ABC9C;"></i> Why do you choose DreamsEye?</h3>
                            <p v-if="about">{{about.choice_us}}</p>
                        </div>
                        <div class="col-md-5 pl-md-5">
                            <h3 class="text-dark"><i class="icon-line-circle-check color mr-1 position-relative" style="top: 2px;color: #1ABC9C;"></i> Our Address</h3>
                            <p v-if="about">{{about.address}}</p>
                        </div>
                        <div class="clear"></div>
                    </div>
                </div>

这是我的 vue 开发工具截图 在此处输入图像描述

这是我的回复截图

在此处输入图像描述

4

3 回答 3

0

您正在使用 访问计算属性about，但计算属性定义为About。

JavaScript 区分大小写。

于 2021-04-05T06:26:34.040 回答
0

首先，将 this 更改 About() 为 this是一个错字about()。这是因为 vuejs 区分大小写。其次，当您使用数组类型时，您需要遍历它以获取每列的数据，所以试试这个

<div v-for="abt in about" :key="abt.id"class="heading-block border-bottom-0 mb-0">
                                <h2 class="nott font-weight-semibold mb-4 text-secondary" style="color: #1ABC9C;">Our Story</h2>
                                <p v-if="about">{{abt.about_us}}</p>
于 2021-04-05T06:29:05.310 回答
0

你们只是看看我的方法和 vue 组件......但实际问题出在我的控制器中......

$about = About::where('publication_status',1)->orderBy('id','ASC')->take(1)->first();
return response()->json(['about',$about],200);

到

$about = About::where('publication_status',1)->orderBy('id','ASC')->take(1)->first();
return response()->json(['about'=>$about],200);
于 2021-04-05T07:25:18.070 回答