Как использовать импортированную переменную в шаблоне?

Question

[uRoot]

Немного пробую Vue, вот никак не могу понять как мне использовать импортированную переменную в шаблоне, объеденив её с пропсами.

Компонент

<template>
  ...
  
  <img class="article__image" :src="HOST + image" /> // вот тут
  ...
</template>

<style lang="scss" scoped>
@import "Article";
</style>

<script lang="ts">
import {HOST} from "@/config/api"

export default {
  props: {
    title: String,
    text: String,
    id: String,
    image: String
  },
}
</script>

В React я бы сделал так: <img src=`${HOST}/${image}` />

Как это делается во Vue?

Answer 1

[Андрей Хохлов]

В шаблоне доступно все что указано в data (а так же в props и methods) если используете Options API, либо всё что возвращает метод setup() если используете Vue 3 Composition API.

https://vuejs.org/v2/guide/components.html
https://v3.vuejs.org/guide/component-basics.html
https://v3.vuejs.org/guide/composition-api-introdu...

Кроме того, в вашем случае правильным решением будет завести computed свойство, которое будет генерировать src картинки (склеивать HOST с props.image) и использовать в шаблоне уже его.

Comments

[uRoot]

А, то есть конкатенировать две строки в шаблоне во Vue нельзя от слова слова совсем, как в том же React? Это bad practices?

[Андрей Хохлов]

uRoot, можно. В целом можно любые выражения и вычисления использовать в шаблонах.

Непосредственно в документации объясняется мотивация использования computed https://vuejs.org/v2/guide/computed.html - длинные/сложные выражения в шаблонах трудно читать и поддерживать. Плюс computed кешируются.

Склеить 2 строки это конечно ;t не про сложные выражения, так что тут скорее про best practices принятые у нас.

Кроме того, в вашем случае правильным решением

->

Кроме того, на мой взгляд более правильным