Vue.js如何将data中的url绑定到click方法并在新标签页打开

问题根因 #

你的chocs是数组类型，模板中没有遍历该数组，直接在点击事件中传递的choc属于未定义变量，因此方法内无法读取到对应的url值。

解决方案 #

场景1：仅需要调用数组内第一条url #

直接修改按钮的点击事件传参即可，修改后HTML代码如下：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>my hat</h2>
  <button v-on:click="myclick2(chocs[0])">
    my link
  </button>
</div>

场景2：需要给数组内每一条数据都生成对应跳转按钮 #

用v-for遍历数组渲染按钮，修改后HTML代码如下：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>my hat</h2>
  <div v-for="(choc, index) in chocs" :key="index">
    <button v-on:click="myclick2(choc)">
      打开链接{{index + 1}}
    </button>
  </div>
</div>

兼容性优化 #

如果window.open触发浏览器弹窗拦截，可以替换方法内的打开逻辑，模拟a标签点击跳转：

methods: {
  myclick2: function(choc){
    const aTag = document.createElement('a')
    aTag.href = choc.url
    aTag.target = '_blank'
    aTag.click()
  }
}

内容的提问来源于stack exchange，提问作者Vzupo