gpt4 book ai didi

javascript - 使用vue.js从laravel开始并出现 “Property or method is not defined on the instance but referenced during render.”错误

转载 作者:行者123 更新时间:2023-12-03 06:45:10 25 4
gpt4 key购买 nike

{{greeting}}在屏幕上闪烁后,结果是空白页。
我是Vue的新手,只想在laravel中尝试一下,所以我制作了一个简单的 Blade :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VueJS</title>
<link rel="stylesheet" href="">

</head>
<body>
<div id="app">
@{{ greeting }}
</div>

<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
然后是js / app.js:
require('./bootstrap');
window.Vue = require('vue');


// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

const app = new Vue({
el: '#app',
data: {
greeting: 'Hello!'
}
});
我只向其中添加了问候语。加载网站时,出现上述错误或完整提示:

app.js:38298 [Vue warn]: Property or method "greeting" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.(found in Root)


我曾尝试在{{greeting}}之前删除“@”,但这给了我“使用不确定的常量”错误。
我还检查了错误中提供的链接,并尽力将其复制到app.js中,如下所示:
const app = new Vue({
el: '#app',
data: {
greeting: ''
},
template: '<div>{{ greeting }}</div>'
});

app.greeting = 'Hello!';
但是也有同样的错误。我还检查了一些解决方案,但是我对这些解决方案的理解不够,无法将其应用于我的问题。

最佳答案

问题是您没有正确定义Vue实例的数据。 data应该定义如下:

const app = new Vue({
el: '#app',
data() {
return {
greeting: 'Hello!';
};
}
});

关于javascript - 使用vue.js从laravel开始并出现 “Property or method is not defined on the instance but referenced during render.”错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63386229/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com