Вроде делаю как в документации
get the Swiper instance in components inside of Swiper
import { ref } from 'vue';setup() {
const swiper = ref();
return {
swiper,
onSwiper: instance => swiper.value = instance,
...
};
},<swiper
@swiper="onSwiper"
...
>:readonly="`${item.isReadonly}`"false будет "false", а булевым эквивалентом любой непустой строки является true.
props: {
active: Boolean,
},data: () => ({
active: null,
}),<v-button
v-for="i in 3"
:active="active === i"
@click="active = active === i ? null : i"
>V-model="filterPriceFrom"V-model="filterPriceTo"props:['FilterPriceFrom', 'FilterPriceTo', "FilterCategoryId"],
v-model совместно с входными параметрами особого смысла нет. Потому чтоВсе входные параметры образуют одностороннюю привязку между дочерним свойством и родительским: когда родительское свойство обновляется — оно будет передаваться дочернему, но не наоборот.
v-model="параметр" на:value="параметр" @input="$emit('update:параметр', $event.target.value)".min(6, passwordMessage) ---> .min(6, () => passwordMessage.value)
data: () => ({
items: [ ... ],
filters: [
item => item.status === 'hello, world!!',
item => item.price > 666,
item => item.text.includes('fuck the world'),
],
}),
computed: {
filteredItems() {
return this.filters.reduce((items, filterFn) => items.filter(filterFn), this.items);
},
},data(){ return{ Item: { ...
v-model="item.name"ADD_TO_PRODUCTS({commit}, item){ commit('SET_PRODUCT_TO_STATE', item) },
methods:{ ...mapActions([ 'ADD_TO_PRODUCTS', ]),
@click="ADD_TO_PRODUCTS"Читая документацию - сложно полностью понять её.
Может ли это означать, что frontend не мое
либо это стандартная ситуация и стоить продолжать?
deep: true, сохраняющий данные в localStorage уже есть, так что никаких дополнительных действий предпринимать не придётся.<div id="app">
<div>
<input v-model="newTaskText" @keypress.enter="addTask">
<button @click="addTask">add</button>
</div>
<hr>
<ol v-if="tasks.length">
<li v-for="(n, i) in tasks">
<label :class="{ 'task-checked': n.checked }">
<input type="checkbox" v-model="n.checked">
{{ n.text }}
</label>
<button @click="delTask(i)">del</button>
</li>
</ol>
<strong>Total: {{ tasks.length || 'no tasks fucking exist' }}</strong>
</div>.task-checked {
text-decoration: line-through;
}Vue.createApp({
data: () => ({
newTaskText: '',
tasks: JSON.parse(localStorage.getItem('tasks')) ?? [],
}),
watch: {
tasks: {
deep: true,
handler: val => localStorage.setItem('tasks', JSON.stringify(val)),
},
},
methods: {
addTask() {
const text = this.newTaskText.trim();
if (text) {
this.tasks.push({
text,
checked: false,
});
this.newTaskText = '';
} else {
alert('fuck off');
}
},
delTask(index) {
if (confirm('really?')) {
this.tasks.splice(index, 1);
}
},
},
}).mount('#app');нужно создать 6 блоков с разными цветами
:style="{ color: bgColor }"Делаю как в документации
v-for="(index, bgColor) in colorArray"computed: {
component() {
/*
* здесь возвращаете имя компонента, в зависимости от... это вам виднее;
* если действительно будет так, как показано в вопросе - натуральные числа
* соответствуют компонентам, то можно сложить имена компонентов в массив:
* return [ 'component-1', 'component-2', 'component-3' ][this.x - 1];
*/
},
},<component :is="component" />
computed: {
linesCount() {
return 1 + (this.text.match(/\n/g)?.length ?? 0);
},
},<div>{{ linesCount }}</div>
computed: {
categories() {
return this.posts.data.reduce((acc, n) => (
(acc[n.category_name] ??= {
name: n.category_name,
posts: [],
}).posts.push(...n.posts),
acc
), {});
},
...<div v-for="category in categories">
<h3>{{ category.name }}</h3>
<div v-for="post in category.posts">
{{ post.title }}
</div>
</div>ref указанный так указывает на Proxy а не на элемент. Как это исправить?