javascript - Vue：修改数据返回依赖 userAgent

Question

我是VUE的新手，我尝试修改禁用值取决于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
                }
            }
},

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

标签： javascriptvue.jsuser-agent

Answer 1

关于match返回的内容存在误解。在匹配的情况下，它返回一个数组，而不是匹配的字符串。如果失败，它会返回null。更多信息在这里。

您可以更新代码以解决此问题：

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