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.
Вместо гамбургера отображается надпись "Меню"
<select v-model="user.name">
<option value="">Выбрать</option>
<option v-for="o in getOptions(index)" :value="o.value" v-text="o.label"></option>
</select>
getOptions(index) {
return this.options.filter(o => this.users.every((u, i) => u.name !== o.value || i === index));
},
watch: {
'$route.params.id': {
immediate: true,
handler() {
/*
* здесь идёт выполнение каких-то действий,
* направленных на обновление компонента - запрос данных, например...
* тут уж вам виднее, что это должно быть
*/
},
},
},
запрос на сервер отправляется два раза, хотя есть переменная, которая это блокирует
есть переменная end, статус которой проверяется постоянно
this.end = false
в finally (однако, само по себе это не гарантирует, что вы не сможете отправлять следующий запрос до окончания предыдущего). <span class="b-span" :class="{ 'b-span_active': active }">hello, world!!</span>
<button @click="onClick">click me</button>
data: () => ({
active: false,
time: 300,
}),
methods: {
onClick() {
setTimeout(() => this.active = true, this.time);
},
},
item.price
this.cartItems.reduce((sum, n) => sum + n.price, 0)
Вью держит значение индекса, почему он не может выполнить такую простую операцию?
:delay="i * 0.5"
? - попробуйте, вдруг подойдёт. проблема в том, что видимо когда по первому запросу поле name заполняется, соответственно поле name_changed становится равно true и кнопка сохранения получается изначально доступна
watch:{ name(val, old){ this.name_changed = true; } }
this.$watch('name', () => this.name_changed = true);
Как привязать обработку событию из слота
Почему-то this.$slots.default[0].elm выводит undefined
created() {
accessAPI().then(result => this.api = result);
},
<imgMap :api="api"></imgMap>
<imgMap v-if="api" :api="api"></imgMap>
не могу напрямую вызывать асинхронные методы из обьекта они недоступны. Сейчас я решил проблему так:
props: { api : Object }, data() { return { apiLocal : null } } async mounted() { this.apiLocal = await this. api; await this.apiLocal.methods1(); }
есть модальное окно-увеличение картинки, нажимая на него, маршрут сбивается
<a :id="item.id" v-b-modal="'img-'+item.id" href="#" >
@click.prevent
.