: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 havemetaInfowill recursively merge theirmetaInfointo 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'v-for="o in getOptions2(index)" на v-for="o in user.options"; в обработчик change первого селекта передаёте текущий объект: @change="changeUser(user)", и соответственно, полученные данные кладёте в этот объект вместо options2 (их просто вырезаете):changeUser(user) {
fetch('https://jsonplaceholder.typicode.com/photos')
.then(r => r.json())
.then(d => this.$set(user, 'options', d));
},В хуке App.vue выглядит не очень уместно, хочется вынести эту логику в другое место.
Почему я не могу блокировать загрузку приложения до выполнения нужного мне действия (запрос на апи, возврат ответа и наполнение стора)?
store.dispatch('получитьДанные').then(() => {
new Vue({
el: '#app',
store,
router,
...<div v-if="данные в хранилище есть">
основной контент приложения
</div>
<div v-else>
данные загружаются, надо подождать
</div>this.$nextTick(() => {
const el = this.$refs.container;
el.scrollTop = el.scrollHeight;
});И второй вопрос, если у меня в реальном проекте при таком коде не спускается никак, потому что идет погрузка через вкладки и используется keep-alive.