laravel 属性或方法未在实例上定义但在渲染期间被引用 - Vue
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48774520/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Property or method is not defined on the instance but referenced during render - Vue
提问by
I have a Vuecomponent using with Laravelapp:
我有一个Vue与Laravel应用程序一起使用的组件：
resources/assets/js/app.js:
resources/assets/js/app.js：
Vue.component('auth-form', require('./components/AuthForm.vue'));
const app = new Vue({
el: '#app',
data: {
showModal: false
}
});
AuthForm.vue:
AuthForm.vue：
<template>
<div v-if="showModal">
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" @click="showModal=false">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
modal body
</div>
</div>
</div>
</div>
</div>
</transition>
</div>
</template>
<script>
export default {
name: "auth-form"
}
</script>
<style scoped>
...
</style>
I'm using component inside bladetemplate:
我在blade模板中使用组件：
<div id="app">
...
<button id="show-modal" @click="showModal = true">Auth</button>
...
<auth-form></auth-form>
</div>
And I'm getting error
我收到错误
Property or method "showModal" is not defined on the instance but referenced during render.
属性或方法“showModal”未在实例上定义，但在渲染期间被引用。
What's wrong with my component?
我的组件有什么问题？
I used this JSFiddleas example.
我以这个JSFiddle为例。
回答by Coxeh
The reason is you have defined showModel in the root component and AuthForm is a child of this.
原因是您在根组件中定义了 showModel 并且 AuthForm 是它的子项。
change the script in AuthForm.vue to:
将 AuthForm.vue 中的脚本更改为：
<script>
export default {
name: "auth-form",
data:function(){
return {
showModal: false
}
}
}
</script>
Or you could write a computed method to get the value from the parent component.
或者您可以编写一个计算方法来从父组件获取值。
edit:
编辑：
ahh ok i see what you require. you will need to use properties instead
啊好吧，我明白你需要什么。您将需要改用属性
blade template
刀片模板
<div id="app">
<button id="show-modal" @click="showModal = true">Auth</button>
<auth-form :show.sync="showModal"></auth-form>
</div>
script in AuthForm.vue
AuthForm.vue 中的脚本
<script>
export default {
name: "auth-form",
props:['show'],
computed:{
showModal:{
get:function(){
return this.show;
},
set:function(newValue){
this.show = newValue;
}
}
}
}
</script>
回答by Roy J
showModalis a data item in the parent Vue, and not in the component. Since you want them to be the same thing, you should pass showModalto the child component as a prop. The click in the child component should emit an eventthat the parent handles (by changing the value).
showModal是父 Vue 中的数据项，而不是组件中的数据项。由于您希望它们相同，您应该将showModal它们作为 prop传递给子组件。子组件中的单击应发出父级处理的事件（通过更改值）。
