export default {
render(h) {
return h('ul', this.$slots['list-item'].map(n => h('li', [ n ])));
},
};components: {
SlotWrapper: {
functional: true,
render: (h, context) => context.props.node,
},
},<li v-for="n in $slots['list-item']">
<slot-wrapper :node="n"></slot-wrapper>
</li>function () { axios.get(api.udpEmulatorProxy)
return axios.get?this.getShips() this.$store.commit('getShips', 10)
get? - смысл-то в установке значения, так что правильно было бы set) передавать те данные, что возвращает getShips:this.$store.commit('getShips', await this.getShips());Пользователь выбирает несколько таких чекбоксов и нажимает кнопку "Выбрать".
selected() {
return this.filters.map(n => ({
filterId: n.filterId,
values: n.filterData.variants.filter(m => m.checked).map(m => m.key),
}));
},data() {
return {
items: ['iPhone 7', 'Galaxy S8', 'Nokia N8', 'Xiaomi Mi6'],
};
},хочу сделать крутящийся spinner на блоке, когда данные обновляются, затем при выводе новых данных, скрывать его
this.showSpinner = truethis.showSpinner = false<div class="spinner" v-if="showSpinner"></div>
Консоль говорит, что не может найти product, потому что я не правильно использую хуки.
var prod = product;product? Это который в data лежит? Тогда должно быть this.product. Почему вы пытаетесь определить переменную с таким же именем как и у параметра? А при вызове в хуке mounted - почему ничего не передаёте в метод results, у него же определён параметр?mounted при вызове results передавайте ему product - this.results(this.product). Или так: строку удаляете, удаляете параметр prod, в вызове axios.get вместо prod используете this.product.
при вводе каждого символа с поля слетает фокус
this.form.company_ids.push({
key: this.form.company_ids.length,
});this.form.company_ids.push({
key: ++this.currKey,
});this.form.company_ids.push({
key: Math.max(0, ...this.form.company_ids.map(n => n.key)) + 1,
});methods: {
group(item) {
return item && Object.entries(this.groups).find(([ k, v ]) => v.includes(item.group))[0];
},computed: {
selectedGroup() {
return this.group([].concat(...this.data.map(n => n.items)).find(n => n.checked));
},<ul v-for="{ items } in data">
<li v-for="item in items">
<label>
<input
type="checkbox"
v-model="item.checked"
:disabled="selectedGroup && selectedGroup !== group(item)"
>
{{ item.name }} ({{ group(item) }})
</label>
</li>
</ul>data: () => ({
mainCategories: [
{ merchantId: '1', checked: true },
{ merchantId: '2', checked: true },
...
],
}),
computed: {
checkedCategories() {
return this.mainCategories.filter(n => n.checked).map(n => n.merchantId);
},
},<li v-for="n in mainCategories">
<label>
<input type="checkbox" v-model="n.checked">
{{ n.merchantId }}
</label>
</li>created() {
this.checkedCategories = this.mainCategories.map(n => n.merchantId);
},data: () => ({
items: [
{ name: 'PHOTOSHOP', val: 88, color: 'red' },
{ name: 'ILLUSTRATOR', val: 92, color: 'green' },
{ name: 'SKETCH', val: 90, color: 'orange' },
{ name: 'AFFTER EFFECTS', val: 98, color: 'blue' },
],
}),border-bottom например) у элемента списка:methods: {
liText: item => `${item.name} ${item.val}%`,
liStyle: item => ({
'border-bottom': `3px solid ${item.color}`,
width: `${item.val}%`,
}),
},<ul>
<li
v-for="n in items"
v-text="liText(n)"
:style="liStyle(n)"
></li>
</ul>data: () => ({
show: false,
items: [ 'в сети', 'занят', 'отсутствую', 'в самолете', 'в пути' ],
status: 'статус',
}),
methods: {
selectStatus(status) {
this.status = status;
this.show = false;
},
},<div
v-text="status"
@click="show = !show"
></div>
<ul v-show="show">
<li
v-for="n in items"
v-text="n"
@click="selectStatus(n)"
></li>
</ul>{ имя_диалога: состояние }. Тогда при обновлении состояния диалогов не будет необходимости обращаться к ним поимённо:mutations: {
dialogShow: (state, payload) => Object.assign(state.modals, payload),
},modals() {
return new Proxy(this.$store.state.modals, {
set: (target, prop, value) => {
this.$store.commit('dialogShow', { [prop]: value });
return true;
},
});
},<el-button @click="modals.dialogSignIn = true">sign in</el-button>
<el-dialog :visible="modals.dialogSignIn" @close="modals.dialogSignIn = false">
<span slot="footer" class="dialog-footer">
<el-button @click="modals.dialogSignIn = false">Закрыть</el-button>
</span>
</el-dialog>В Network указывается не jpeg, а text/html
mounted() {
const img = new Image();
img.onload = () => this.$refs.canvas.getContext('2d').drawImage(img, 0, 0);
img.src = '...';
},