data: () => ({
options: [
{ value: 69, text: 'hello, world!!' },
{ value: 187, text: 'fuck the world' },
{ value: 666, text: 'fuck everything' },
],
value: null,
}),
computed: {
selectedText() {
return (this.options.find(n => n.value === this.value) || {}).text || '';
},
},
<select v-model="value">
<option v-for="n in options" :value="n.value">{{ n.text }}</option>
</select>
<div>
Текст выбранной опции: <span>{{ selectedText }}</span>
</div>
в итоге выводится не разница, а просто текущее значение показателя
watch: {
totalBuyQuantity(newVal, oldVal) {
this.buyDiff = newVal - oldVal;
},
},
data: () => ({
opened: null,
blocks: [
{ id: 1, content: 'Я первый' },
{ id: 2, content: 'А я второй' },
{ id: 3, content: 'Третьим буду' },
],
}),
<a v-for="b in blocks" @click="opened = b">открыть {{ b.id }} блок</a>
<div v-if="opened" :class="`block-${opened.id}`">
<a @click="opened = null">Скрыть блок</a>
<div class="content">{{ opened.content }}</div>
</div>
filters: {
price: val => val.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1 ").replace('.', ','),
},
td {{ product.price | price }}
price: val => val.toLocaleString('ru', {
style: 'currency',
currency: 'RUB',
}),
:class="[ { infoItem.fadeClass: !infoItem.isVisible }, infoItem.defaultClass ]"
[infoItem.fadeClass]
:to="{ path: '/field_of_activity', props: { messageId: 1}}"
props: route => ({ ...route.query })
.props: route => ({ ...route.query, ...route.params })
при выборе меньше 100 кнопка submit (отправка формы) не появлялась либо не была активна?
<button :disabled="notAllGoalsAchieved">submit</button>
methods: {
notAchieved(goal) {
return goal.tasks.reduce((acc, n) => acc + n.value, 0) !== 100;
},
},
computed: {
notAllGoalsAchieved() {
return this.goals.some(this.notAchieved);
},
},
показывать что конкретная цель не до конца проставлена(каким нибудь текстовым сообщением)
<span v-show="notAchieved(g)">не достигнута</span>
Child components that havemetaInfo
will recursively merge theirmetaInfo
into the parent context, overwriting any duplicate properties.
Как можно решить эту проблему?
i.
на active.
. Условие рендеринга окна станет v-if="active"
. Обработчик клика кнопки закрытия окна: @click="active = null"
. Обработчик клика на изображение внутри v-for: @click="active = i"
. data: () => ({
goals: [
{
name: '...',
tasks: [
{ name: '...', value: 0 },
{ name: '...', value: 0 },
...
],
},
...
],
}),
methods: {
getValues(tasks, task) {
const max = 100 - tasks.reduce((acc, n) => acc + n.value, -task.value);
return [ 0, 10, 20, 30, 40, 50, 60 ].filter(n => n <= max);
},
},
<tr v-for="g in goals">
<td>{{ g.name }}</td>
<td>
<div v-for="t in g.tasks" class="task">
{{ t.name }}
<select v-model.number="t.value">
<option v-for="v in getValues(g.tasks, t)" :value="v">{{ v }}</option>
</select>
</div>
</td>
</tr>
в обычном html файле
<script src="vue-date-pick-master/dist/vueDatePick.js"></script>
<link href="vue-date-pick-master/dist/vueDatePick.css" rel="stylesheet">
components: {
VueDatePick,
},
Vue.component('date-pick', VueDatePick);
Пробовал через массивы, но не работает.
import Vue from 'vue/dist/vue.esm.js'
import Vue from 'vue'