laravel中的vue js..计算方法未定义

Posted 2023-02-23

【中文标题】laravel中的vue js..计算方法未定义

【英文标题】：vue js in laravel..Computed method is undefined

【发布时间】：2021-07-01 01:37:57

【问题描述】：

我试图获取数据，但它说计算方法在 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::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

【问题讨论】：

也许您没有得到答案，因为您似乎没有显示正确的代码。您说错误是计算方法未定义。所以告诉我们你在哪里调用这个方法，用什么名字。提示：不要对计算属性使用大写字母。它不符合编码标准，甚至可能是您的问题的原因。

我展示了调用计算方法的位置...当我为管理站点调用它时，它运行良好，但对于客户端站点，它在 vue 开发工具中显示未定义

不，它没有。在你的 Vue 模板中的某个地方应该有类似：v-for="item of About"。这就是错误的来源。你没有表现出来。您正在展示执行 About 计算属性时发生的情况。但你的问题是它甚至没有被执行。

好的...我明白了..所以我需要使用 v-for...但我不想循环它...我只需要一行...是这是问题???我必须使用 v-for???...我正在编辑问题并向您展示它在哪里执行

好的，谢谢，它有帮助。在您的后端，您正在发送一个数组。在您的前端，您尝试使用键访问该数组，但您的后端没有发送关联数组。你的后端代码应该是：return response()->json(['about' => $about],200); 注意=>。

【参考方案1】：

你们看看我的方法和 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);

【讨论】：

这并不能解释您最初的问题“计算方法未定义”。其他两个答案都是正确的，只是您的代码中还有第二个问题，由您自己的答案解决。

首先你抱怨没有人帮助你。比起我们帮助您，我们甚至会为您的问题找到解决方案，从而导致第二个问题。这就是调试的全部内容。我觉得你说答案不正确而实际上是不正确的，这是非常粗鲁的，甚至从正确的答案中收回分数。

对不起我的评论...我删除了它...感谢您帮助我...再次抱歉

【参考方案2】：

首先这是一个拼写错误，将 About() 更改为 thisabout() 。这是因为 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>

【讨论】：

您没有阅读 cmets...您告诉我删除大写字母，而我删除了...并告诉您仍然无法正常工作...

你有没有尝试我现在​​发布的内容

元素不见了...我编辑了我的问题请看...

【参考方案3】：

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

javascript 区分大小写。

【讨论】：

对不起，我在编辑器中更改了我的代码，但不是在这里……我在这里编辑了它……我删除了大写字母……但仍然显示相同的未定义

比告诉我们你得到的确切错误，包括错误指示的行。

现在 html 元素不见了...我知道你想说什么...但我想说我的网络选项卡获取了数据但 vue 开发工具说 undefine....为了澄清我是向您展示我的 vue 开发工具和网络选项卡屏幕截图