Question

我有一些道具。

这基本上是在生成链接

import URL from 'url';
export default {
  props: {
    url: {
      type: URL,
      required: true,
    },
    external: {
      type: Boolean,
      default: false,
    }
}

我这样称呼它：

<componentName url="http://google.com" :external="true" />

在组件中，我有：

<template>
  <a
    :href="url"
    :target="{'_blank': external}"
  > some text </a>
</template>

但这会打印出来

target="[object Object]"

正确的方法是什么？

Answer 1

我相信这两种方法都可以使用：

<a :href="url" :target="external ? '_blank' : false">Link</a>

<a :href="url" :target="external && '_blank'">Link</a>

Answer 2

您使用的道具类型URL错误，并且您也想根据target布尔值使external变成_blank或false，因此我建议您创建一个将返回字符串的方法布尔值false的“ _blank”。例如，您可以运行以下代码段。

var addTarget = Vue.extend({
	template:   `<a :href="url" :target="external ? 'blank_' : false" > som text </a>`,
  props: {
    url: {
      type: String,
      required: true,
    },
    external: {
      type: Boolean,
      default: false,
    }
  }
})

Vue.component('add-target', addTarget)

var app = new Vue({
	el: '#app',
  component: {
  	addTarget: addTarget
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <add-target url="http://google.com" :external="false"></add-target>
</div>

根据布尔属性添加target =“ _ blank”

2 个答案: