Vuejs: Как прикрепить реквизит условно?

Question

У меня есть компонент A, который импортируется в другой компонент B. Компонент A открывается в модальном окне при нажатии кнопки в компоненте B. Компонент A называется blogPost. Существует 2 варианта использования.

1 Один, в котором нам нужно передать 2 реквизита при нажатии кнопки.

<blogPost :token_id="tokenId" :token_url="tokenUrl"></blogPost>

2 Тот, который не требует реквизита при нажатии кнопки

<blogPost></blogPost>

Есть ли способ условно прикрепить подпорки. Я хочу прикрепить реквизиты в зависимости от условия на панели инструментов. Если inDashboard истинно, мне нужен случай 1. Если inDashboard - ложь, мне нужен случай 2. Есть ли способ добиться этого в одной строке. Теперь у меня есть 2 строки для них отдельно в отдельном модальном окне.

Answer 1

v-bind может пригодиться.

<blogPost v-bind="inDashboard && postProps"></blogPost>

{
  data: () => ({
    postProps: {
      token_id: 123,
      token_url: 'https://some.url'
    }
  })
}

Что это значит, если условие не выполняется, оно не будет оценивать второе выражение, которое в основном связывает его с false и не будет иметь никакого эффекта или будет проигнорирован (v-bind позаботится об этом внутри); в противном случае он будет назначать значения (реквизиты) в одном go.

Answer 2

Вы можете достичь этого следующим образом:

<blogPost :token_id="inDashboard?tokenId:null" :token_url="inDashboard?tokenUrl:null"></blogPost>

, а затем проверьте это в blogPost либо token_id, либо token_url имеют значения или нет