[Vuejs]-Getting a Vue.js computed to run without being part of the DOM

by

0👍

✅

You could add a watch:

watch: { updateUsername() {} }

Fiddle: https://jsfiddle.net/acdcjunior/k6rknwqg/2/

But it seems what you want are two watchers instead:

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;
        }
    }
});

Fiddle: https://jsfiddle.net/acdcjunior/k6rknwqg/6/

Another option (watching two or more properties simultaneously):

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})
    }
});

Fiddle: https://jsfiddle.net/acdcjunior/k6rknwqg/11/

👤acdcjunior

0👍

For Vue2, computed properties are cached based on their dependencies. A computed property will only re-evaluate when some of its dependencies have changed.

In your example, computed property=updateUserName will be re-evaluate when either dogName or yourName is changed.

And I think it is not a good idea to update other data in computed property, you will remeber you update userName in computed property=updateUserName now, but after a long time, you may meet some problems why my username is updated accidentally, then you don’t remember you update it in one of the computed properties.

Finally, based on your example, I think watch should be better.

You can define three watcher for userName, dogName, yourName, then execute your own logic at there.

var main = new Vue({
    el: '#app',
    data: {
        yourName: 'Adam',
        dogName: 'Barkster',
        userName: 'Adam Barkster'
    },
        methods: {
    },
    computed: {
        updateUsername: function(){
           return this.yourName + this.dogName;
        }
    },
    watch: {
      dogName: function(newValue){
        this.userName = this.yourName + ' ' + newValue
      },
      yourName: function(newValue){
        this.userName = newValue + ' '+this.dogName
      },
      userName: function(newValue) {
        // below is one sample, it will update dogName and yourName 
        //  when end user type in something in the <input>.
        let temp = newValue.split(' ')
        this.yourName = temp[0]
        this.dogName = temp[1]
      }
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<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>
</div>
👤Sphinx

Leave a comment