[Vuejs]-Vue: Modify data return depends userAgent

by

1👍

✅

There is a misunderstanding regarding what match returns. In case of a match it returns an array, not the matched string. In case of failure it returns null. More info here.

You can update your code to fix this:

phopepeMatch: function () {
  let userAgent = navigator.userAgent
  let phonepeMatch = userAgent.match("phonepe-webview")
  if (phonepeMatch === null){
    return false
  }
  else {
    this.paymentMothods[2].disabled = false
    return true
  }
}

-1👍

Use .splice().

methods: {
        phopepeMatch: function () {
            let userAgent = navigator.userAgent
            let phonepeMatch = userAgent.match("phonepe-webview")
            if (phonepeMatch === "phonepe-webview"){
                // first you need to copy the whole object
                let payment_method = this.paymentMothods[2];
                // next is to modify the property of the object you want to change
                payment_method.disabled = false;
                // finally, replace the old one with the new object
                this.paymentMothods.splice(2, 1, payment_method);
                return true
            }
            else {
                return false
            }
        }

},

More information:

In Vue’s documentation, under the Reactivity in depth section, it states:

Vue cannot detect the following changes to an array:

1.) When you directly set an item with the index, e.g. vm.items[indexOfItem] = newValue

2.) When you modify the length of the array, e.g. vm.items.length = newLength

However, Vue does provide a way to do it in which Vue’s Reactivity System will be able to detect your changes in an array.

Instead of this:

this.paymentMothods[2].disabled = false

You should do it like this:

let payment_method = this.paymentMothods[2];

payment_method.disabled = false;

this.paymentMothods.splice(2, 1, payment_method);

or like this (using this.$set()):

let payment_method = this.paymentMothods[2];

payment_method.disabled = false;

this.$set(this.paymentMothods, 2, payment_method);

Leave a comment