根据布尔道具添加target =“_ blank”

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成为_blank或false取决于external布尔值，所以我建议你创建一个方法，它将返回布尔值为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>