{this.state.image}
<img src={this.props.items[this.state.image].img} />
<App />
<App items={items} />
const isEmpty = [...inputs].some(n => !n.value);
// или
const isEmpty = !Array.prototype.every.call(inputs, n => n.value);
// или
let isEmpty = false;
for (const n of inputs) {
if (!n.value) {
isEmpty = true;
break;
}
}
// или
let isEmpty = false;
for (let i = -1; ++i < inputs.length && !(isEmpty = !inputs[i].value);) ;
// или
const isEmpty = (function isEmpty(i) {
return i < inputs.length && (!inputs[i].value || isEmpty(-~i));
})(0);
const grouped = Object.entries(list.reduce((acc, n) => (
(acc[n.part] = acc[n.part] || []).push(n.title),
acc
), {}));
document.body.insertAdjacentHTML('beforeend', grouped
.map(([ k, v ]) => `<div>${k}</div>${v.map(n => `<div>${n}</div>`).join('')}`)
.join('')
);
document.body.append(...grouped.flat(2).map(n => {
const div = document.createElement('div');
div.innerText = n;
return div;
}));
const ids = [ 10, 13, 15 ];
.$(ids.map(n => `[data-property-id-row="${n}"]`).join(', ')).hide();
const elems = document.querySelectorAll(ids.map(n => `[data-property-id-row="${n}"]`));
for (let i = 0; i < elems.length; i++) {
elems[i].style.display = 'none';
}
document.querySelectorAll('.form-group').forEach(function(n) {
n.hidden = this.has(Number(n.getAttribute('data-property-id-row')));
}, new Set(ids));
.hidden {
display: none;
}
for (const n of document.getElementsByClassName('form-group')) {
n.classList.toggle('hidden', ids.includes(+n.dataset.propertyIdRow));
}
<select v-model="selected">
<option v-for="n in deliveryPrice" :value="n">{{ n.city }}</option>
</select>
<div v-if="selected">
<div>{{ selected.city }}</div>
<div>{{ selected.priceFrom }}</div>
</div>
[object Object]
, отображаемый в качестве value в разметке, то v-model пусть по-прежнему с примитивными значениями работает, а выбранный объект оформляем как computed свойство:<select v-model="city">
<option v-for="n in deliveryPrice">{{ n.city }}</option>
</select>
computed: {
selected() {
return this.deliveryPrice.find(n => n.city === this.city);
},
},
<select v-model="selectedIndex">
<option v-for="(n, i) in deliveryPrice" :value="i">{{ n.city }}</option>
</select>
data: () => ({
selectedIndex: -1,
}),
computed: {
selected() {
return this.deliveryPrice[this.selectedIndex];
},
},
let index = -1;
setInterval(() => {
index = (index + 1) % array.length;
console.log(array[index]);
}, 500);
Показалось будет неудобно юзать в Вью компоненте. Мне надо при наведении мышки показывать по кругу картинки из массива и останавливать при убирании мышки.
<div
@mouseenter="установитьИнтервал"
@mouseleave="сброситьИнтервал"
>
methods: {
установитьИнтервал() {
this.interval = setInterval(() => { ... }, 666);
},
сброситьИнтервал() {
clearInterval(this.interval);
},
},
function App() {
const [ values, setValues ] = useState(Array(10).fill(''));
const onChange = ({ target: t }) => {
const index = +t.dataset.index;
const value = t.value;
setValues(values.map((n, i) => i === index ? value : n));
if (index < values.length - 1 && value) {
inputRefs.current[index + 1].focus();
inputRefs.current[index + 1].select();
}
};
const inputRefs = useRef([]);
return (
<div>
{values.map((n, i) => (
<div>
<input
value={n}
data-index={i}
onChange={onChange}
ref={input => inputRefs.current[i] = input}
maxLength="1"
/>
</div>
))}
</div>
);
}
$("#changeCityInput").bind("keyup change",
$('#changeCityInput').on('input',
const checked = Array.from(document.querySelectorAll('.btn:checked'), n => n.value);
const filtered = arr.filter(n => checked.includes(n));
const createList = arr => arr.reduceRight((acc, n) => ({ val: n, next: acc }), null);
const list = createList([ 1, 2, 3, 4 ]);
let slider = -1;
setInterval(() => {
slider = (slider + 1) % $sliders.length;
$sliders.eq(slider).slick('slickNext');
}, 1000);
const WIDTH = 300;
const HEIGHT = 300;
const canvas = document.getElementById('canvas');
canvas.width = WIDTH;
canvas.height = HEIGHT;
const ctx = canvas.getContext('2d');
const
X = 100,
Y = 100,
A = 90,
B = 50;
const
N = 1000,
SIDE = 4,
HALF_SIDE = SIDE / 2;
const rand = (min, max) => Math.random() * (max - min) + min;
ctx.beginPath();
ctx.ellipse(X, Y, B, A, Math.PI / 2, 0, 2 * Math.PI);
ctx.stroke();
for (let i = 0; i < N; i++) {
const
x = rand(-A + HALF_SIDE, A - HALF_SIDE),
maxAbsY = (B - HALF_SIDE) / A * Math.sqrt(A * A - x * x),
y = rand(-maxAbsY, maxAbsY);
ctx.beginPath();
ctx.rect(x + X - HALF_SIDE, y + Y - HALF_SIDE, SIDE, SIDE);
ctx.stroke();
}
button.addEventListener('click', () => {
anotherButton.click();
});
button.addEventListener('click', () => {
anotherButton.dispatchEvent(new Event('click', { bubbles: true }));
});
data: () => ({
questions: [
{
text: '2 x 2?',
answers: [ '5', '3', '69', '187' ],
},
{
text: '...',
answers: [ '...', '...', ... ],
},
...
],
}) ,
props: [ 'text', 'answers', 'value' ],
<div>{{ text }}</div>
<div v-for="n in answers">
<label>
<input
type="radio"
:checked="n === value"
@change="$emit('input', n)"
>
{{ n }}
</label>
</div>
props: [ 'questions' ],
data: () => ({
index: 0,
answers: [],
}),
<div v-if="index < questions.length">
вопрос
</div>
<div v-else>
результаты
</div>
<question
v-bind="questions[index]"
v-model="answers[index]"
/>
:disabled="!answers[index]"
; б) скрывать - v-show="answers[index]"
):<button @click="index++">дальше</button>
<div v-for="(n, i) in questions">
{{ n.text }} - {{ answers[i] }}
</div>