this.$set(this.chartOptions.series[0].data, индекс, значение);<button @click="onClick">click me</button>
<apexchart
ref="chart"
...methods: {
onClick() {
this.$refs.chart.zoomX(...);
},
...Все делал как в инструкции
var chart = document.querySelector('.chart').then(function(response) { chart.updateSeries([{ name: 'Sales', data: response.data }]) })
.then(response => {
this.series = [
{
name: 'Sales',
data: response.data,
},
];
});data: () => ({
employees: [
{ ..., actions: [ 'delete', 'ещё что-то', 'и ещё' ] },
...
],
...props: {
columns: Array,
data: Array,
},<table>
<thead>
<tr>
<th v-for="(col, colIndex) in columns" :key="col.key">{{ col.label }}</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, rowIndex) in data" :key="row.id">
<td
v-for="col in columns"
:key="col.key"
:data-label="col.label"
>
<slot
:name="`column.${col.key}`"
:col-data="col"
:col-index="colIndex"
:row-data="row"
:row-index="rowIndex"
>
{{ row[col.key] }}
</slot>
</td>
</tr>
</tbody>
</table><v-table :columns="titles" :data="employees">
<template #column.actions="{ rowData, rowIndex }">
<div>
<button
v-for="action in rowData.actions"
v-text="action"
@click="onActionClick(action, rowData, rowIndex)"
></button>
</div>
</template>
</v-table>methods: {
onActionClick(action, row, index) {
switch (action) {
case 'delete':
this.employees.splice(index, 1);
return;
case 'ещё что-то':
this.сделатьЧтоТоЕщё(row);
return;
}
},
...Object.defineProperty($auth, 'isPro', {
get: () => store.getters.isPro,
});v-model. Документацию, судя по показанной чуши, вы вообще не читали (максимум, одним глазом глянули её пересказ каким-нибудь дегенератом на youtube'е). Это зря. Документацию читать надо. Вот прямо сейчас откройте и почитайте. Ну а пока читаете, исправим ваш говнокод.model="global" на v-model="global".model: {
prop: 'model',
},
computed: {
checked() {
return this.model === this.value;
},
},<label :class="{ labelActive: checked }">
<input type="radio" :checked="checked" @input="$emit('input', value)">
{{ value }}
</label>data: () => ({
items: [
{ text: '...', price: ..., checked: false },
{ text: '...', price: ..., checked: false },
...
],
}),
computed: {
sum() {
return this.items.reduce((acc, n) => acc + n.price * n.checked, 0);
},
},<div v-for="n in items">
<label>
<input v-model="n.checked" type="checkbox">
{{ n.text }}
</label>
</div>
<div>SUM: {{ sum }}</div>data: () => ({
year: null,
month: null,
day: null,
}),
computed: {
daysCount() {
const { year, month } = this;
return year !== null && month !== null
? new Date(this.year, this.month + 1, 0).getDate()
: 0;
},
date() {
const { year, month, day } = this;
return year !== null && month !== null && day !== null
? new Date(year, month, day)
: null;
},
},
watch: {
daysCount(val) {
if (this.day) {
this.day = Math.min(this.day, val);
}
},
},<select v-model="year">
<option v-for="i in 30">{{ 2000 + i }}</option>
</select>
<select v-model="month">
<option v-for="i in 12" :value="i - 1">
{{ new Date(0, i - 1).toLocaleDateString('ru-RU', { month: 'long' }) }}
</option>
</select>
<select v-model="day">
<option v-for="i in daysCount">{{ i }}</option>
</select>data: () => ({
headers: [
{ key: 'name', label: 'ФИО' },
{ key: 'department', label: 'Отдел' },
{ key: 'position', label: 'Должность' },
{ key: 'hostname', label: 'Имя ПК' },
{ key: 'username', label: 'Учётка' },
],
...<thead>
<tr>
<th v-for="n in headers">{{ n.label }}</th>
</tr>
</thead>
<tbody>
<tr v-for="employee in employees">
<td v-for="n in headers" :data-label="n.label">{{ employee[n.key] }}</td>
</tr>
</tbody>[
{
name: 'componentName1',
props: {
propName1: ...,
propName2: ...,
},
},
{
name: 'componentName2',
props: {
propName69: ...,
propName187: ...,
propName666: ...,
},
},
...
]<component
v-for="n in componentsData"
v-bind="n.props"
:is="n.name"
/>data: () => ({
columns: [
{ field: '...', label: '...' },
{ field: '...', label: '...' },
...
],
focused: {},
...
}),
methods: {
rowStyle(row) {
return row === this.focused.record && {
backgroundColor: 'red',
};
},
cellStyle(row, cell) {
return cell.name === this.columns[this.focused.colPos]?.field && {
backgroundColor: 'orange',
};
},
},<vue-excel-editor
:row-style="rowStyle"
:cell-style="cellStyle"
@cell-focus="focused = $event"
...
>
<vue-excel-column
v-for="n in columns"
v-bind="n"
:key="n.field"
/>
</vue-excel-editor>state: {
pokemons: [],
next: 'https://pokeapi.co/api/v2/pokemon',
},actions: {
async fetchPokemons({ state, commit }) {
const data = await fetch(state.next).then(r => r.json());
commit('setPokemons', {
pokemons: data.results,
next: data.next,
});
}
},<button
:disabled="!$store.state.next"
@click="$store.dispatch('fetchPokemons')"
>
NEXT
</button>components: {
componentName: () => import('...').then(component => {
console.log(component.default.props);
return component;
}),
...
},methods: {
toggleElement(id) {
const index = this.selectedElArr.indexOf(id);
if (index !== -1) {
this.selectedElArr.splice(index, 1);
} else {
this.selectedElArr.push(id);
}
},
...@click="toggleElement(data.id)"