计算Vue.js的运行使其不成为DOM的一部分

Nathan 发表于 Dev

内森

我无法弄清楚如何使Vue.js始终评估计算结果，而不管我是否在页面中实际使用它。我要完成的工作的简化版本是有几个输入字段，当两个字段都更新时，我想影响另一个字段的值。我也希望该字段也可以手动编辑。jsfiddle示例。

的HTML：

<div id="app">
  <p v-if="updateUsername">Just here to get the darn thing to run</p>
  <div>
    yourName:<input v-model="yourName">
  </div>
  <div>
    dogsName:<input v-model="dogName">
  </div>  
  <div>
    username:<input v-model="userName">
  </div>
</div>

js：

var main = new Vue({
    el: '#app',
        data: {
            yourName: 'Adam',
        dogName: 'Barkster',
        userName: ''
    },
        methods: {
    },
    computed: {
        updateUsername: function(){
                this.userName = this.yourName + this.dogName;
        }
    }
});

这完全可以按照我的要求工作，但是需要BS在html中使用“ updateUsername”。我敢肯定有更好的方法。

初级

您可以添加watch：

watch: { updateUsername() {} }

小提琴：https : //jsfiddle.net/acdcjunior/k6rknwqg/2/

但是似乎您想要的是两个观察者：

var main = new Vue({
    el: '#app',
    data: {
        yourName: 'Adam',
        dogName: 'Barkster',
        userName: ''
    },
    watch: {
        yourName: {
            handler() {
                this.userName = this.yourName + this.dogName;
            },
            immediate: true
        },
        dogName() {
            this.userName = this.yourName + this.dogName;
        }
    }
});

小提琴：https : //jsfiddle.net/acdcjunior/k6rknwqg/6/

另一个选项（同时监视两个或多个属性）：

var main = new Vue({
    el: '#app',
    data: {
        yourName: 'Adam',
        dogName: 'Barkster',
        userName: ''
    },
    mounted() {
        this.$watch(vm => [vm.yourName, vm.dogName].join(), val => {
            this.userName = this.yourName + this.dogName;
        }, {immediate: true})
    }
});

小提琴：https : //jsfiddle.net/acdcjunior/k6rknwqg/11/

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。