<template>
<b-button
variant="outline-warning"
class="d-block text-white text-uppercase"
:disabled="btnLoading"
>
<span v-text="buttonText"></span>
<i class="fas fa-spinner fa-spin" v-if="btnLoading"></i>
</b-button>
</template>
<script>
...
data() {
return {
tabIndex: 0,
firstServer: {},
product: {},
order: {
nickname: '',
productId: ''
},
btnLoading: false
}
},
computed: {
buttonText() {
return this.btnLoading
? 'Подождите'
: `Купить за ${ this.product.original_price } руб.`;
}
}
...
</script>data(){
return {
classDir: '',
}
}
onLeave(i, ni, dir){
this.classDir = dir;
}
<div :class="{up: classDir}">addUser() {
this.users.push({
name: '',
procent: this.users.length,
});
},createMap(), setObjects(dateStart, dateEnd), deleteObjects()@clicked=onChangeDate в котором вызываете пересоздание объектов на существующей картеonChangeDate(dateStart, dateEnd) {
this.deleteObjects();
this.setObjects(dateStart, dateEnd);
}<MyComp>
<Navbar @clicked="onChangeDate"/>
<YandexMap
:date-start="dateStart"
:date-end="dateEnd"
/>
<MyComp>
<script>
data: function(){
return {
dateStart: null,
dateEnd: null,
}
}
methods: {
onchangeDate(d1, d2){
this.dateStart = d1;
this.dateEnd = d2;
}
}
</script><components :is="users"> </components>
<components :is="active"> </components>let arr = [1,2,3];
let val = 'BMW';
let payload = {
names : arr,
values: {
brand: val,
},
};
axios.get('http://site.ru?id=1', {
params: payload,
paramsSerializer: function(params) {
let tmp = [];
params.names.forEach(item => {tmp.push(`names[]=${item}`)});
for (let name in params.values) {
if (!params.values.hasOwnProperty(name)) continue;
tmp.push(`values[${name}]=${params.values[name]}`);
}
return tmp.join('&');
},
}).then( ...Array
(
[id] => 1
[names] => Array
(
[0] => 1
[1] => 2
[2] => 3
)
[values] => Array
(
[brand] => BMW
)
)<div>
<h2 @click="toggle"></h2>
<div v-if="stateOpen">
Скрытое содержимое
</div>
</div>{
data() {
return {
stateOpen: false,
}
},
methods: {
toggle(){
this.stateOpen = !this.stateOpen;
}
}
}<MyComponent :foo="bar">
<div class="my-component">
<h3>Разметка компонента, генерируемая сервером по старинке</h3>
</div>
</MyComponent>Правильно ли будет, если в методе addNewElement() я буду использовать стандартные методы работы с DOM-деревом?
export default Vue.extend({
methods: {
hello: function () {
console.log('test')
}
}
})