jquery 如何使用vue.js 2更改范围上的文本？

niwlg2el 于 2023-02-15 发布在 jQuery

关注(0)|答案(2)|浏览(156)

我的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来获取和更新span上的文本
我如何使用vue.js2来实现这一点？
我看了一些参考资料，说它使用watch。但是我还是很困惑如何使用它

jquery

来源：https://stackoverflow.com/questions/43093231/how-to-change-text-on-the-span-use-vue-js-2

2条答案

按热度按时间

jhdbpxl91#

变更

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
       }
    },
    ...

赞(0）回复(0）举报 2023-02-15

tjrkku2a2#

在模板上，使用以下命令更改跨度：

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

这将连接span和值totalNotif。因此，在VueJs部分，删除jquery部分，仅更新数据totalNotif，并自动更新span文本内容。
EDIT为了更好地理解，脚本部分变成：

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

            })
        },
    }
}

赞(0）回复(0）举报 2023-02-15

我来回答

jquery 如何使用vue.js 2更改范围上的文本？

2条答案

相关问题

热门标签

最新问答