<select v-model="selected">
<option v-for="item in options" :value="item.value">
{{ item.title }}
</option>
</select>data: () => ({
selected: null,
...
}),
computed: {
monthRate() {
if (this.selected === 'year') {
return this.percent / 12 / 100;
} else if (this.selected === 'month') {
return this.percent / 100;
} else {
return 0;
}
},
},нужно, чтобы в зависимости от выбранной опции, функция срабатывала по разной формуле
monthRate() {
return this.percent * this.selected / 100;
},.dropdown-checkbox ul.opened {
display: block;
}<label @click="opened = !opened">click me</label>
<ul :class="{ opened }">
...data: () => ({
opened: false,
}),firebase.auth().onAuthStateChanged(user => {
if (user) {
store.dispatch('loggedUser', user);
}
new Vue(...);
});<script type="text/x-template" id="tree-template"> {{ item }} </script>
li - вы же внутри ul пытаетесь их выводить:<script type="text/x-template" id="tree-template">
<li>{{ item }}</li>
</script><ul v-for="item in items" :key="item.id"> <tree-items :item="item" ></tree-items> </ul>
v-for внутрь списка (кстати, а какого чёрта в имени компонента элемента списка множественное число? почему items, а не item?):<ul>
<tree-items
v-for="item in items"
:key="item.id"
:item="item"
></tree-items>
</ul><div ref="map">mounted() {
this.map = L.map(this.$refs.map).setView([ 55.75222, 37.61556 ], 13);
...<v-data-table @click:row="onClickRow">methods: {
onClickRow(item) {
console.log(item);
},
...new Vue({
store: store,
...new Vue({
store: createStore(),
...передавать параметры <...> оставив в computed
methods: {
filterHeroes(attr) {
const s = this.searchHeroesString.toLowerCase();
return this.heroes.filter(n => n.hero_attribute === attr && n.name.toLowerCase().includes(s));
},data: () => ({
active: false,
}),
created() {
const onClick = e => this.active = this.$refs.block.contains(e.target) && this.active;
document.addEventListener('click', onClick);
this.$on('hook:beforeDestroy', () => document.removeEventListener('click', onClick));
},<button @click.stop="active = !active">click me</button>
<div :class="{ active }" ref="block">hello, world!!</div>state: {
opened: null,
...<Trigger :block="block">props: [ 'block' ],computed: mapState([ 'opened' ]),:class="{ 'active' : block === opened }"@click="toggleNav(block)"toggleNav(state, block) {
state.opened = state.opened === block ? null : block;
},state.opened = block (название мутации в этом случае конечно следует поменять).closeSidebarPanel(state) {
state.opened = null;
},isPanelOpen(state) {
return !!state.opened;
},<span v-if="isPanelOpen">{{ $store.state.opened.bName }}</span><slot :block="$store.state.opened"></slot><template #default="{ block }">
<div class="sidebar-panel-settings">
<div class="setting-block">
{{ block.bName }}
</div>
</div>
</template><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);
},
},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>return this.$store.authInfothis.$store.state.authInfo?
:class="form.FirstName !== null ? form.FirstName ? 'input-successes' : 'input-error' : ''":class="{ 'input-successes': form.FirstName, 'input-error': form.FirstName === false }":class="form.FirstName !== null && [ 'input-error', 'input-successes' ][+form.FirstName]":class="({ true: 'input-successes', false: 'input-error' })[form.FirstName]"после перезагрузки страницы получаю undefined
правильно ли я возвращаю копию значения с объекта store.singleMetricNamesMap
$store.state.singleMetricNamesMap[value.metricId]. Если так по-вашему слишком длинно - сделайте в компоненте вычисляемое свойство, которое будет представлять singleMetricNamesMap.
width: 100% !important;, а родительский элемент canvas'а карты имеет нулевые размеры.new ymaps.Map("map", {