<div id="calculator"></div>
export function mountVueComponent(targetId, component) {
if (document.getElementById(targetId)) {
new (Vue.extend(component))().$mount(`#${targetId}`);
}
}
import Calculator from '....';
mountVueComponent('calculator', Calculator);
<div class="mini-calc"></div>
Array.from(document.querySelectorAll('.mini-calc')).forEach(el => {
let yandexGoal = el.dataset['goal'];
new Vue({
el : el,
render: createElement => createElement(Calculator, {
props: {
displayAs: CALC_DISPLAY_AS_MINI,
yandexGoal,
},
}),
});
});
computed: {
range() {
const prices = this.filterData.map(n => n.price);
return {
min: Math.min(...prices),
max: Math.max(...prices),
};
},
// или
range() {
return this.filterData.reduce(({ min, max }, { price: n }) => ({
min: min < n ? min : n,
max: max > n ? max : n,
}), { min: Infinity, max: -Infinity });
},
// или
range() {
const prices = this.filterData.map(n => n.price).sort((a, b) => a - b);
return {
min: prices[0] ?? Infinity,
max: prices[prices.length - 1] ?? -Infinity,
};
},
},
<input type="range" v-bind="range">
id
- уникальный идентификатор, он должен быть в одном экземпляре.<div id="container">
<input v-for="input in inputs" v-model="input.value" :name="input.name" type="hidden" >
</div>
data: {
inputs: [
{
name: 'k1',
value: ""
},
{
name: 'k2',
value: ""
}
]
}
И значения получаются, соответственно, из массива inputs
.<router-link :to="{ query: { color: 'red', price: '1000' }}">User</router-link>
router.push({ query: { color: 'red', price: '1000' }})
<router-link :to="{ name: 'sales', query: { color: 'red', price: '1000' }}">User</router-link>
<router-link :to="{ path: '/filters', query: { color: 'red', price: '1000' }}">User</router-link>
router.push({ name: 'sales', query: { color: 'red', price: '1000' }})
router.push({ path: '/filters', query: { color: 'red', price: '1000' }})
Возможно ли прописать условие, если при нажатии кнопки воспроизведется функция 1, то name = «Vlad»?
watch: {
isAdaptive: {
immediate: true,
handler(val) {
this.$emit('adaptivity-toggled', val);
},
},
},
<Navigation @adaptivity-toggled="onAdaptivityToggled" />
methods: {
onAdaptivityToggled(e) {
console.log(e); // ну вот и всё
},
},
v-for="(item, index) in items"
v-bind:style="index == 0 ? {стили для первого элемента} : {}"
watch: {
'$route' (from, to) {
if (from.path !== to.path) { // или любое другое условие
axios.getSomethingFromBackend()
}
}
}