require не "берёт картинки из папки", require обрабатывает картинки loader'om и выдаёт в ответ результат. Статический результат, который попадает в бандл. require(`./img/${name}.png`);- не значит "взять картинку по имени name из папки img во время исполнения", это значит "во время компиляции взять все картинки с маской './img/*.png', обработать loader'ом, получить для каждой статическую ссылку, и положить в бандл". loader'ы по умолчанию превращают маленькие картинки в data:uri строки, а большие перекладывают в папочку imgs и переименовывают с хэшем, возвращая путь. Но это по-умолчанию, а так они способны много всякой магии творить.public копируются в результирующую папку как есть и доступны по /name.png без require, просто через обычный html и css.
computed не будет пересчитаться при обновлении ref'ов или dom-значений. Он работает с реактивными данными.computed и поместите в mounted, вручную присваивая значения переменной в data. Не забудьте добавить значения по умолчанию, а также обновлять их при необходимости(по событию resize или ещё какому, способныму повлиять на эти размеры).
/catalog/:slug/:option?./catalog/:slug/(.*)? и ловить любые пути.
getMediaUrls пока не будет данных. getMediaUrls должно быть computed свойство mediaUrls; во-вторых: скрывайте в шаблоне отображение пока не появятся данные: v-if="currentProductData"/v-if="currentProductData.length" и показывайте вместо этого какой-нить loader, Vue не запросит то, что скрыто под v-if пока условие не станет верным.getMediaUrls в mounted и разрывать асинхронную цепочку. Вызывайте его сразу в getProductData, либо если currentProductData может меняться в иных случаях - сделайте, опять же, computed свойством. В крайнем случае можно вызывать его, повесив watch на currentProductData, но computed лучше.
<form>
<input />
<button onclick="alert('Такие дела')"></button>
</form><div class="row">
<div class="input-field col s12">
<select class="group-select" ref="select2" v-model="depart_select">
<optgroup v-for="department in departments" :key="department.id" :label="department.NameOtdel">
<option v-for="{NamePodrazdel, id} in department.NamePodrazdel" :key="id" :value="id">{{ NamePodrazdel }} </option>
</optgroup>
</select>
<label>Структурное подразделение</label>
</div>
</div>interface Volume {
id: number;
volume?: string;
}
interface Snapshot {
id: number;
snapshot?: string;
}interface Volume {
id: number;
volume: string;
}
interface Snapshot {
id: number;
snapshot: string;
}interface Volume {
id?: number;
}
interface Snapshot {
id?: string;
}export default {
server: {
host: '0.0.0.0'
}
}route params - плохо (но возможно push({name: <name>, params: {...}})). Если кто-то откроет страничку напрямую - он ничего не увидит.
bodyв зависимости от присутствия компонента на странице(я правильно понял?) - делай это руками: добавляй body класс на created, убирай на destroyed.