vue.js의 데이터에서 메서드를 호출하려면 어떻게 해야 합니까?

vue.js의 데이터에서 메서드를 호출하려면 어떻게 해야 합니까?

내 vue 컴포넌트는 다음과 같습니다.

<template>
    ...
        <ul class="nav nav-tabs nav-tabs-bg">
            <li v-for="tab in tabs" role="presentation" :class="setActive(tab.url)">
                <a :href="baseUrl + tab.url">{{tab.title}}</a>
            </li>
        </ul>
    ...
</template>

<script>
    export default {
        props: ['shop'],
        data() {
            return{
                tabs: [
                    {
                        title: 'product',
                        url: '/store/' + this.shop.id + '/' + strSlug(this.shop.name)
                    },
                    {
                        title: 'info',
                        url: '/store/' + this.shop.id + '/' + strSlug(this.shop.name) + '/info'
                    }
                ]
            }
        },
        methods: {
            setActive(pathname){
                return {active: window.location.pathname == pathname}
            },
            strSlug: function(val) {
                return _.kebabCase(val)
            }
        }
    }
</script>

코드가 실행되면 다음과 같은 오류가 발생합니다.

[Vue warn] :data() 오류: "ReferenceError: strSlug이 정의되지 않았습니다."

console.log(window.location.pathname)를 실행하면 다음과 같은 결과가 나타납니다.

/store/21/harge-hazard-store

따라서 탭에 데이터가 있는 url과 동일한 경우 활성화 됩니다.

strSlug 메서드를 호출하여 각 메서드를 소문자로 변환하고 공백은 다음과 같이 변환합니다.-

데이터에서 메서드를 호출할 수 없는 것 같습니다.

어떻게 하면 오류를 해결할 수 있을까요?

에 함수가 있는 경우data다른 오브젝트(이벤트 핸들러 등)의 컨텍스트에서 사용됩니다.this는 Vue 인스턴스를 가리키지 않습니다.참조를 다른 변수에서 보존해야 합니다.data():

methods: {
    shuffle() {}
},
data() {
    var self = this;
    return {
        onClick: function() {
            self.shuffle()
        }
    }
}

vue 개체 내에서 데이터 또는 메서드에 액세스할 때this.thing당신의 경우, 그건this.strSlug(this.shop.name).

데이터를 초기화할 때 해당 함수가 정의되지 않았기 때문에 'this'에서도 작동하지 않습니다.created() 라이프 사이클 훅으로 해야 할 것 같아요.

언급URL : https://stackoverflow.com/questions/46966689/how-can-i-call-method-from-data-on-vue-js