时间戳

首页 > 解决方案 > 在按钮单击时重定向到 Vue 中数据元素中指定的 url

vue.js - 在按钮单击时重定向到 Vue 中数据元素中指定的 url

问题描述

我有一个 Vue 应用程序，我在我的数据元素中指定所有链接，例如：

data(){
    return{
        products:[
            {
                Name: "Product 1",
                buy_now_link: "https://www.product_1.com/",
            },
            {
                Name: "Product 2",
                buy_now_link: "https://www.product_2.com/",
            }
        ]
    }
}

上面的网址可能并不总是有模式，它们可能会有所不同。

在我的模板中，我有一个按钮，可以将用户重定向到指定 url 中提供的链接。模板代码如下：

<div class="content">
    <div class="nested" v-for="product in products">
        <div class="one">
            <button class="buy_now_button" :click="window.location='buy_now_link'">Buy now</button>
        </div>
  </div>
</div>

我收到一个错误Cannot set property 'location' of undefined

我该如何解决这个问题？

标签： vue.js

解决方案

创建将用户重定向到链接的新方法。

Vue实例部分：

methods: {
  redirectToLink(link) {
    window.location = link;
  }
}

在模板中：

<button class="buy_now_button" @click="redirectToLink(product.buy_now_link)">Buy now</button>

推荐阅读