laravel..Computed 方法中的 vue js 未定义
vue js in laravel..Computed method is undefined
我试图获取数据,但它说计算方法在 vue 开发工具中未定义
我的方法是
<script>
export default{
name:"about",
mounted(){
this.$store.dispatch('getFrontAbouts');
},
computed:{
about(){
return this.$store.getters.about;
}
},
}
</script>
store2.js 我通过 axios 调用获取这些数据的文件
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;
},
}
}
我正在获取数据的控制器文件
public 函数 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 开发工具截图
enter image description here
这是我的回复截图
enter image description here
您正在使用 about
访问计算的 属性,但计算的 属性 定义为 About
。
JavaScript区分大小写。
首先,将此 About()
更改为此 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>
你们看看我的方法和 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);
我试图获取数据,但它说计算方法在 vue 开发工具中未定义 我的方法是
<script>
export default{
name:"about",
mounted(){
this.$store.dispatch('getFrontAbouts');
},
computed:{
about(){
return this.$store.getters.about;
}
},
}
</script>
store2.js 我通过 axios 调用获取这些数据的文件
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;
},
}
}
我正在获取数据的控制器文件
public 函数 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 开发工具截图 enter image description here
这是我的回复截图
enter image description here
您正在使用 about
访问计算的 属性,但计算的 属性 定义为 About
。
JavaScript区分大小写。
首先,将此 About()
更改为此 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>
你们看看我的方法和 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);