Vue：修改数据返回依赖 userAgent答案

【问题标题】：Vue: Modify data return depends userAgentVue：修改数据返回依赖 userAgent
【发布时间】：2020-05-12 23:19:51
【问题描述】：

我是 VUE 新手，我尝试修改 disabled 值取决于 userAgent 显示或隐藏 paymentMethod：

data() {
            return {
                paymentMothods: [
                    { name: 'Visa checkout', img: 'visa.png', disabled: false, height: '19', class: 'v-button' },
                    { name: 'PayPal', img: 'paypal.png', disabled: false, height: '18.9', class: '' },
                    { name: 'PhonePE', img: 'phonepe.png', disabled: true, height: '18.9', class: 'phonepe' },
                ]
           }
},

如果 userAgent 是 phonepe-webview 我尝试更改值：

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

但这并没有显示付款方式:(

【问题讨论】：

匹配区分大小写 - 另外，phopepeMatch 方法是如何/在哪里调用的？还有一件事，match 返回 null 或数组 - 所以你想要 if (phonepeMatch && phonepeMatch[0] === "phonepe-webview")
将console.info(phonepeMatch) 放在if 语句之前的一行中。显示什么？
剧透警报：.match() 返回一个数组，而不是字符串。您的函数将始终返回 false：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

标签： javascript vue.js user-agent

【解决方案1】：

对于match 返回的内容存在误解。如果匹配，则返回一个数组，不是匹配的字符串。如果失败，它会返回null。更多信息here。

你可以更新你的代码来解决这个问题：

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

【讨论】：

【解决方案2】：

使用.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
            }
        }

更多信息：

在 Vue 的文档中，在 Reactivity in depth 部分下，它声明：

Vue 无法检测到数组的以下更改：

1.) 当您直接使用索引设置项目时，例如vm.items[indexOfItem] = newValue

2.) 当您修改数组的长度时，例如vm.items.length = newLength

但是，Vue 确实提供了一种方法来做到这一点，其中 Vue 的 反应系统 将能够检测您在数组中的更改。

改为：

this.paymentMothods[2].disabled = false

你应该这样做：

let payment_method = this.paymentMothods[2];

payment_method.disabled = false;

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

或像这样（使用this.$set()）：

let payment_method = this.paymentMothods[2];

payment_method.disabled = false;

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

【讨论】：