Добавить target = "_ blank" в зависимости от логического свойства - PullRequest
Новая
       25

Добавить target = "_ blank" в зависимости от логического свойства

0 голосов
/ 11 апреля 2019

У меня есть какой-то компонент с этим реквизитом.

Это в основном генерирует ссылку 

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]"

Что правильно?

Ответы [ 2 ]

3 голосов
/ 11 апреля 2019

Я считаю, что любой из них будет работать: 

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

<a :href="url" :target="external && '_blank'">Link</a>
2 голосов
/ 11 апреля 2019

У вас неправильный тип реквизита URL, также вы хотите, чтобы target стал _blank или false в зависимости от external логического значения, поэтому я бы предложил вам создать метод, который будет возвращать строку '_blank' из логического false , Вы можете запустить мой фрагмент ниже, например. 

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>
...