vue.js 如何正确使用手表

dxxyhpgq 于 2022-12-04 发布在 Vue.js

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

我通过点击一个<li>，从父组件向子组件发送 prop month_id。我的子组件代码如下。

<script>
    export default {
        props: ['mosque_id', 'month_id'],
        data(){
            return {
                prayer_times: [],
            }
        },
        watch: {
            month_id() {
                this.getPrayerTime();
            }
        },
        methods:{
            getPrayerTime: function () {
                axios.get('/api/v1/getPrayerTime/'+ this.mosque_id+'/'+ this.month_id)
                .then(function (response) {
                    this.prayer_times = response.data;
                }.bind(this));
            }
        },
    }
</script>

但是我得到结果有点晚了。我必须在<li>上单击两次才能得到结果。我正确使用watch了吗？

vue.js

来源：https://stackoverflow.com/questions/74628431/how-to-use-watch-properly

2条答案

按热度按时间

kuhbmx9i1#

添加immediate:true选项以在第一次渲染时运行监视，同时将function (response) {更改为(response)=> {以访问this：

watch: {
            month_id: {
              handler(){
                  this.getPrayerTime();
                },
               immediate : true 
            }
        },
    methods:{
            getPrayerTime: function () {
                axios.get('/api/v1/getPrayerTime/'+ this.mosque_id+'/'+ this.month_id)
                .then((response)=> {
                    this.prayer_times = response.data;
                }.bind(this));
            }
        },

赞(0）回复(0）举报 2022-12-04

kgqe7b3p2#

您可以在watch函数中接收新值，并将其发送到youtgetPrayerTime函数

watch: {
    month_id(newValue, oldValue): {
        this.getPrayerTime(newValue);
    },
}

我想这个能帮到你。

赞(0）回复(0）举报 2022-12-04

我来回答

vue.js 如何正确使用手表

2条答案

相关问题

热门标签

最新问答