如何从 Vue 组件访问值？

Posted 2023-02-23

【中文标题】如何从 Vue 组件访问值？

【英文标题】：How can I access the value from a Vue component?

【发布时间】：2019-02-05 06:38:34

【问题描述】：

我正在尝试使用 Laravel 制作我的作品集。我对 Laravel 很陌生。我认为通过在其中制作一个迷你项目将使我熟悉 Laravel。最近发现Laravel对Vue.js有依赖

我尝试包含 jQuery 库，因为我对 Vue 一点也不熟悉。但这并不顺利。然后我开始搜索 Vue.js，但找不到太多。

经过大量努力，我制作了以下 Vue 组件：

var trialEle = new Vue(
    el: '#trialEle',
    data: 
        working: 'yes'
    
);

然后我尝试通过以下标记访问工作的价值：

<div id="trialEle">
    <h1>Is this working: working</h1>
</div>

但我不知道我错过了什么，因为我经常遇到这个错误：

更新：

正如@Chamara 在下面的答案中所建议的，我已将working 更改为@working，现在没有错误屏幕了。

但我仍然无法从我的 Vue 组件中访问 working 的值。

在页面上显示如下：

Is this working: working

任何帮助将不胜感激。

提前致谢。

【问题讨论】：

你需要制作一个单独的 Vue 组件，然后将它导入到一个通用的 js 文件中，例如：main.js，在你的 Laravel 视图中导入main.js，然后你就可以使用它了，例如 Example.vue将包含 template 视图代码 main.js 将具有渲染数据的 Vue 代码并最终在视图中使用它，如 <Example :title="I am awesome"></Example>

感谢 @user10415043 的回答，但我只是从 Vue JS 更改为 jQuery，因为学习 Vue 变得越来越困难，因为所有教程都是付费的。

【参考方案1】：

是blade 中的内置语法，如果您需要在blade 文件中使用vue ，则需要将@ 放在 的前面。所以像这样@working。 Blade 中的@ 将其作为语法忽略。

【讨论】：

使用@忽略错误，但我仍然没有得到工作的价值，即使我将它设置为yes

如何加载vue？通过 webpack？你的控制台有什么错误吗？

没有帮助.. 记住我是 vue 的新手，而且还是 laravel 的新手，请你帮我提供步骤，以便我纠正这个错误。谢谢。