javascript - 在 vuejs2 模板中打开链接作为新窗口答案

【问题标题】：javascript - open link as new window in vuejs2 templatejavascript - 在 vuejs2 模板中打开链接作为新窗口
【发布时间】：2018-06-07 10:58:14
【问题描述】：

我需要打开一个具有一定高度和宽度的新窗口。

在 vuejs2 我有这样的东西：

<el-table-column label="Link" width="80">
  <template scope="props">
    <a v-bind:href="''+props.row.link+''" target="chart"> Link to chart </a>
  </template>
</el-table-column>
在 props.row.link 中有：http://host/charts/index.php?par=sth 所以这个href在新标签中打开，但没有高度和宽度，也没有在新窗口中。

在 html 上就是这么简单：

<a href="http://host/charts/index.php?par=1" onclick="window.open('http://host/charts/index.php?par=1', 'chart', 'width=1225, height=770'); return false;">Link to chart</a>

如何在 vue js 2 中实现这一点，也许作为点击方法？

【问题讨论】：

试试这个：链接到图表

标签： vuejs2 element-ui

【解决方案1】：

代替

<a v-bind:href="''+props.row.link+''" target="chart"> Link to chart </a>

使用

<a href="" v-on:click.stop.prevent="openWindow(props.row.link)">Link to chart</a>

这将防止链接被点击和重定向。此外，它还调用在组件的方法对象中声明的函数“openWindow”：

openWindow: function (link) {
  window.open(...);
}

【讨论】：

谢谢！链接到图表工作正常。

【解决方案2】：

不要使用 v-bind:href，而是调用一个会打开新窗口的函数

【讨论】：

好的。尝试调用函数，但如何从 props.row.link 传递参数... chart 不幸的是从行中获取字符串而不是参数。我的方法： OpenWindow(link) { window.open('' + link + '', 'chart', 'width=1225, height=770') console.log(link) -->get string！ }