【问题标题】:Child-Parent-Communication: Method not found?Child-Parent-Communication:找不到方法?
【发布时间】:2019-04-03 21:07:20
【问题描述】:

我正在尝试使用 nuxtjs 设置子父级通信。这是我的孩子:

    <div>
        <b-nav-item @click="clicked" :class="{active: active}">{{item.name}}</b-nav-item>
    </div>
</template>

<script>
    export default {
        props: {
            item:{
                required: true
            },
            active:{
                type: Boolean,
                default: false
            }
        },
        methods: {
            clicked() {             
                this.$emit('clicki');
            }
        },
    }
</script>

家长:

    <NavigationElement v-for="item in clients" :key="item.id" :item="item" @clicki="showClient" :active="currentClient._id==item._id"><NavigationElement>
</template>
<script>
    import NavigationElement from '~/components/NavigationElement.vue'
    import TopicElement from '~/components/TopicElement.vue'
    export default {
        middleware: ['check-auth', 'auth'],
        computed: {clients() {return this.$store.getters.getClients}},
        methods(){
            showClient(){
                console.log("click");
            // this.currentClient = client;
            }
        },
</script>

我收到此错误:

属性或方法“showClient”未在实例上定义,但在渲染期间被引用。通过初始化该属性,确保此属性是反应性的,无论是在数据选项中,还是对于基于类的组件。请参阅:https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties

谁能帮我解释一下为什么我会得到它?

【问题讨论】:

    标签: vue.js nuxt.js


    【解决方案1】:
    </template>
    <script>
       import NavigationElement from '~/components/NavigationElement.vue'
       import TopicElement from '~/components/TopicElement.vue'
       export default {
           middleware: ['check-auth', 'auth'],
           computed: {clients() {return this.$store.getters.getClients}},
           methods:{
               showClient(){
                   console.log("click");
               // this.currentClient = client;
               }
           },
    </script>
    

    方法必须是对象而不是函数。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-03-22
      • 2018-03-12
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多