Javascript 未调用v-if语句中组件的回调_Javascript_Vue.js_Vue Component_Watch

Javascript 未调用v-if语句中组件的回调

javascript vue.js

Javascript 未调用v-if语句中组件的回调,javascript,vue.js,vue-component,watch,Javascript,Vue.js,Vue Component,Watch,我有一个组件“cmptest”，它有一个watched属性“needWatch”。此组件位于v-if语句中，但呈现时不会调用监视的函数如示例所示，“needWatch”prop是用“cmpcheck”中的“value”数据属性设置的，这让我想到应该在这里触发watch回调如果删除v-If语句，则在单击复选框时会按预期调用该函数 <div v-if="value===true"> <cmptest :need-watch="va

我有一个组件“cmptest”，它有一个watched属性“needWatch”。此组件位于v-if语句中，但呈现时不会调用监视的函数

如示例所示，“needWatch”prop是用“cmpcheck”中的“value”数据属性设置的，这让我想到应该在这里触发watch回调

如果删除v-If语句，则在单击复选框时会按预期调用该函数

<div v-if="value===true"><!--remove-->
    <cmptest :need-watch="value"></cmptest>
</div><!--remove-->

这是故意的吗？我做错了什么

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="vue.js"></script>

    <script type="text/x-template" id="cmptesttemplate">
        <div>
            <p>needWatch: {{needWatch}}</p>
            <p>updateByWatch: {{updateByWatch}}</p>
        </div>
    </script>

    <script type="text/x-template" id="cmpchecktemplate">
        <div>
            <input id="checkBox" type="checkbox" value="1" v-on:click="setCheckboxValue()">
            <div v-if="value===true">
                <cmptest :need-watch="value"></cmptest>
            </div>
        </div>
    </script>

</head>
<body>
<div id="container">
    <cmpcheck></cmpcheck>
</div>
<script>

    var cmptest = Vue.component('cmptest', {
        template: '#cmptesttemplate',
        data: function() {
            return {
                updateByWatch: ''
            }
        },
        props: ['needWatch'],
        watch: {
            needWatch: function(v) {
                console.log('Watched!');
                this.updateByWatch = Math.random();
            }
        }
    });

    var cmpcheck = Vue.component('cmpcheck', {
        template: '#cmpchecktemplate',
        data: function() {
            return {
                value: 'Unitialized'
            };
        },
        methods: {
            setCheckboxValue: function() {
                console.log('SELECTED');
                var el = $(this.$el).children('#checkBox').is(':checked');
                this.value = el;
            }
        }
    });

    new Vue({
        el: '#container',
        components: {
            'cmptest': cmptest,
            'cmpcheck': cmpcheck
        }
    });
</script>
</body>
</html>


Vue示例
needWatch:{{needWatch}}
updateByWatch:{{updateByWatch}}
var cmptest=Vue.component（'cmptest'{
模板：“#cmptesttemplate”，
数据：函数（）{
返回{
updateByWatch:“”
}
},
道具：['needWatch']，
观察：{
needWatch：功能（五）{
console.log（'wasted！'）；
this.updateByWatch=Math.random（）；
}
}
});
var cmpcheck=Vue.component（'cmpcheck'{
模板：“#cmpchecktemplate”，
数据：函数（）{
返回{
价值：“统一化”
};
},
方法：{
setCheckboxValue:函数（）{
console.log（'SELECTED'）；
var el=$（this.$el）.children（“#checkBox”）.is（“：checked”）；
该值=el；
}
}
});
新Vue({
el:'集装箱'，
组成部分：{
“cmptest”：cmptest，
“cmpcheck”：cmpcheck
}
});

好吧，只要

值是单位化的
（因此，不是真的
），就永远不会呈现
，因此观察者实际上并不存在。调用setCheckboxValue
后，如果value
为true
，将呈现cmptest
，然后初始化观察程序。但是值
已经是真
，所以它不会被触发
但是，您可以使用：
watch: {
  needWatch: {
    immediate: true,
    handler(nv, ov) { ... }
  }
}

这样，当启动needWatch
时，您的观察者回调将运行。
完成了此任务。非常感谢尼古拉斯！