vue js in laravel..Computed method is undefined

Question

I tried to get data but it says computed method is undefined in vue dev tool my methods are

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

store2.js file where i get those data by axios call

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;
    },
  }
}

my controller file where i am fetching data

public function about(){

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

}

here is my vue component where computed about method is being executed

<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>

here is my vue dev tool screenshot enter image description here

here is my response screenshot

enter image description here

Maybe you didn't get answers because it seems you are not showing the right code. You say the error is that the computed method is undefined. So show us where you are calling the method, and by what name. Tip: don't use capital letters for the computed properties. It's not in line with coding standards, and it might even be the reason of your problem. — Maarten Veerman
– Maarten Veerman, Commented Apr 5, 2021 at 6:07
I showed where computed method is called...when i called it for admin site it worked perfectly but for client site it says undefined in vue dev tool — m.i. shad
– m.i. shad, Commented Apr 5, 2021 at 6:09
No it doesn't. Somewhere in your Vue template there should be something like: v-for="item of About". That's where the error originates. You are not showing that. You are showing what is happening when the About computed property is executed. But your problem is it's not even being executed. — Maarten Veerman
– Maarten Veerman, Commented Apr 5, 2021 at 6:13
Ok...I get it..So I need to use v-for...but I don’t want to loop it...i am taking just a row...is this the problem???do I must use v-for???...i am editing the question and show you where is it being executed — m.i. shad
– m.i. shad, Commented Apr 5, 2021 at 6:20
Ok, thanks for that, it helps. In your backend, you are sending an array. In your frontend you try to access that array using keys, but your backend is not sending an associative array. Your backend code should be: return response()->json(['about' => $about],200); Note the =>. — Maarten Veerman
– Maarten Veerman, Commented Apr 5, 2021 at 7:45

Maarten Veerman · Accepted Answer · 2021-04-05 06:26:34Z

0

You are accessing the computed property using about, but the computed property is defined as About.

JavaScript is case sensitive.

answered Apr 5, 2021 at 6:26

Maarten Veerman

1,6211 gold badge10 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

m.i. shad Over a year ago

Sorry i changed my code in editor but not here...i edited it here...i removed the capital letter.... But still shows same undefined

Maarten Veerman Over a year ago

Than show us the exact error you get, including the line indicated by the error.

m.i. shad Over a year ago

Now html elements gone...i know what you trying to say...but i want to say that my network tab getd data but vue dev tools says undefine.... For clarification i am showing you my vue dev tool and network tab screenshots

Basharmal · Accepted Answer · 2021-04-05 06:48:42Z

0

First it is a typo change this About() to thisabout() . it is because vuejs is case sensitive. Second as you are geting about in array type you need to loop through it to get the data of each column so try this

<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>

edited Apr 5, 2021 at 6:48

answered Apr 5, 2021 at 6:29

Basharmal

1,3941 gold badge14 silver badges36 bronze badges

3 Comments

m.i. shad Over a year ago

You didn’t read the comments...you told me to remove capital letters and i removed...and told you still not working...

Basharmal Over a year ago

did you try what I posted now

m.i. shad Over a year ago

elements are gone...I edited my question please see it...

m.i. shad · Accepted Answer · 2021-04-05 07:25:18Z

0

you guys just look at my methods and vue component...But the actual problem was in my controller where...

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

to

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

answered Apr 5, 2021 at 7:25

m.i. shad

55 bronze badges

3 Comments

Maarten Veerman Over a year ago

This does not explain your initial problem "computed method is undefined". Both other answers are correct, is just that there was a second problem in your code as well, which is solved by your own answer.

Maarten Veerman Over a year ago

First you are complaining nobody is helping you. Than we help you, we even find a solution to your problem, leading to a second problem. That's what's debugging all about. I find it incredibly rude that you say the answers are incorrect while they are not, and even retract points from a correct answer.

m.i. shad Over a year ago

Sorry for my commen... I deleted it...Thank you for helping me out...again sorry

Collectives™ on Stack Overflow

vue js in laravel..Computed method is undefined

3 Answers 3

3 Comments

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related