data: () => ({
filterColumns: [
[ 'name', 'имя', 'string' ],
[ 'count', 'количество', 'number' ],
[ 'distance', 'расстояние', 'number' ],
],
operations: [
[ 'equal', 'равно' ],
[ 'contains', 'содержит' ],
[ 'greater', 'больше' ],
[ 'less', 'меньше' ],
],
...
data: () => ({
types: {
string: {
equal: (a, b) => a.toLowerCase() === b,
contains: (a, b) => a.toLowerCase().includes(b),
greater: (a, b) => a.toLowerCase() > b,
less: (a, b) => a.toLowerCase() < b,
},
number: {
equal: (a, b) => a === +b,
contains: (a, b) => `${a}`.includes(b),
greater: (a, b) => a > +b,
less: (a, b) => a < +b,
},
},
...
<select v-model="column">
<option v-for="n in filterColumns" :value="n[0]">{{ n[1] }}</option>
</select>
<select v-model="operation">
<option v-for="n in operations" :value="n[0]">{{ n[1] }}</option>
</select>
computed: {
filteredItems() {
const { items, column } = this;
const type = this.filterColumns.find(n => n[0] === column)?.[2];
const filterFn = this.types[type]?.[this.operation];
const filterVal = this.filterVal.toLowerCase();
return filterFn && filterVal
? items.filter(n => filterFn(n[column], filterVal))
: items;
},
...
<card-item :title="Неработающий заголовок"/>
Динамически связывает атрибуты тега или входной параметр компонента с выражением.
Неработающий заголовок
- это выражение? <div class="wrapper" v-if="надо рендерить обёртку">
...
<элемент />
...
</div>
<элемент v-else />
Время, которое я задаю, применяется к fadeOut, а вот к runProgress нет
this.fadeOut = `fadeOut ${this.time}s linear forwards`, this.runProgress = `runProgress ${this.time}s liner forwards`,
v-for
. Если изменить значение свойства time и добавить в messages новый элемент, то у тех, что были добавлены раньше, изменится длительность анимации. Наверное, стоит вырезать свойства fadeOut и runProgress, элементам messages при создании добавлять актуальное значение свойства time, типа time: this.time
, и использовать его при задании стилей:methods: {
getStyle: (name, { time }) => ({
animation: `${name} ${time}s linear forwards`,
}),
...
:style="getStyle('fadeOut', message)"
:style="getStyle('runProgress', message)"
function shuffle(arr) {
for (let i = arr.length; i > 1; ) {
const j = Math.random() * (i--) | 0;
[ arr[i], arr[j] ] = [ arr[j], arr[i] ];
}
return arr;
}
computed: {
shuffledAnswers() {
return shuffle(Object.entries(this.questions[this.idx].answers));
},
...
<div v-for="[ key, answer ] in shuffledAnswers">
...
поскольку наше приложение — одностраничное, не сконфигурировав соответствующим образом сервер мы заставим пользователей получать ошибку 404, если они перейдут поhttp://oursite.com/user/id
напрямую
<...>
всё, что нужно — единственная "резервная" запись в конфигурации сервера. Если URL не совпадает ни с одним статическим файлом, сервер должен просто отдать index.html, в котором и живёт наше приложение
<div v-for="(row, iRow) in rows" class="board__rows">
<div
v-for="(col, iCol) in columns"
v-text="col + row"
:class="[ [ 'white', 'black' ][(iRow ^ iCol) & 1], 'board__square' ]"
></div>
</div>
Cannot read properties of undefined (reading 'lastname')
async addNewEmployee({ commit }, employee) { await axios .post(`http://127.0.0.1:8000/api/v1/employees/`, { lastname: employee.lastname,
@submit.prevent="addNewEmployee(employee)"
должен быть более лаконичный способ, чем плодить такие переменные
Или это считается нормальной практикой?
app.ifScroll =
ifScroll.value =
. нет примера их использования
<q-select
ref="select"
...
<q-btn
@click="$refs.select.showPopup()"
...
ul
в transition
следует завернуть li
в transition-group
:<transition-group tag="ul" name="fade" class="buttons">
<li
v-if="какое здесь будет условие, предлагаю подумать самостоятельно"
...
props: { user: String }, emits: ["update:someUser"]
- emits: ["update:someUser"]
+ emits: ["update:user"]
- @input="$emit('update:someUser', $event.target.value)"
+ @input="$emit('update:user', $event.target.value)"
data: () => ({
items: [
{ text: '69', tooltip: 'hello, world!!' },
{ text: '187', tooltip: 'fuck the world' },
{ text: '666', tooltip: 'fuck everything' },
],
}),
<div
v-for="n in items"
v-text="n.text"
:data-tooltip="n.tooltip"
class="item"
></div>
.item {
display: inline-flex;
justify-content: center;
align-items: center;
color: white;
background: red;
width: 150px;
height: 50px;
margin: 10px;
position: relative;
}
.item:hover::before {
content: attr(data-tooltip);
display: inline-block;
background: blue;
color: white;
position: absolute;
}