vue.js 2를 사용하여 스팬의 텍스트를 변경하는 방법

vue.js 2를 사용하여 스팬의 텍스트를 변경하는 방법

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

<template>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
           aria-expanded="false" :title="...">
            ...
            <span v-if="totalNotif > 0" class="badge" id="total-notif">{{ totalNotif }}</span>
        </a>
    </li>
</template>
<script>
    ...
    export default {
        mounted() {
            this.initialMount()
        },
        ...
        computed: {
            ...mapGetters([
                'totalNotif'
            ])
        },
        methods: {
            initialMount() {
                Echo.private('App.User.' + window.Laravel.authUser.id).notification((notification) => {
                    const totalNotif = $('#total-notif').text()
                    const totalNotifNew = parseInt(totalNotif) + 1
                    $('#total-notif').text(totalNotifNew )
                })
            },
        }
    }
</script>

그건 효과가 있다.

그러나 jquery를 사용하여 스팬의 텍스트를 가져오고 업데이트합니다.

vue.js 2를 사용하여 하려면 어떻게 해야 하나요?

참고 문헌을 읽었는데watch하지만 아직 사용하기에 혼란스럽다.

바꾸다

const totalNotif = $('#total-notif').text()
const totalNotifNew = parseInt(totalNotif) + 1
$('#total-notif').text(totalAllNew)

타고

//Set this.totalNotif to 1 if not exist or equals to 0. Else increment by 1
this.totalNotif = (this.totalNotif) ? (this.totalNotif + 1) : 1;

하지만 나는 코드를 이해할 수 없다.

    computed: {
        ...mapGetters([
            'totalNotif'
        ])
    },

예를 들어 다음과 같은 것을 생각할 수 있습니다.

export default {
    mounted() {
        this.initialMount()
    },
    data() {
       return {
           totalNotif: 0
       }
    },
    ...

템플릿에서 다음과 같이 스팬을 변경합니다.

<span v-if="totalNotif > 0" class="badge" id="total-notif" v-text="totalNotif"></span>

접속할 수 있습니다.span가치 있게totalNotifVueJs 부분에서는 jquery 부분을 삭제하고 데이터만 업데이트합니다.totalNotif스팬 텍스트 내용이 자동으로 업데이트됩니다.

편집 더 잘 이해하기 위해 스크립트 부분은 다음과 같습니다.

export default {
    mounted() {
        this.initialMount()
    },

    data() {
       return {
          totalNotif: 0
       }
    },

    methods: {
        initialMount() {
            Echo.private('App.User.' + window.Laravel.authUser.id).notification((notification) => {
                this.totalNotif = this.totalNotif + 1

            })
        },
    }
}

언급URL : https://stackoverflow.com/questions/43093231/how-to-change-text-on-the-span-use-vue-js-2