<div v-if="$route.name !== 'signup'">hello, world!!</div><div v-if="$route.path !== '/signup'">hello, world!!</div><div class="color-label red" @click="color = '#FB253E', textColor = '#ffffff' , strokeColor = '#ffffff';"></div> <div class="color-label green" @click="color = '#19AD6A' ,textColor = '#ffffff' , strokeColor = '#ffffff';"></div> <div class="color-label orange" @click="color = '#FC6621' ,textColor = '#ffffff' , strokeColor = '#ffffff';"></div> <div class="color-label blue" @click="color = '#1386a3' ,textColor = '#ffffff' , strokeColor = '#ffffff';"></div> <div class="color-label yellow" @click="color = '#FFED00' ,textColor = '#111111' , strokeColor = '#111111';"></div> <div class="color-label lightgreen" @click="color = '#00ff00' ,textColor = '#111111' , strokeColor = '#111111';"></div> <div class="color-label white" @click="color = '#ffffff' ,textColor = '#111111' , strokeColor = '#111111';"></div>
<div
v-for="n in colors"
:class="[ 'color-label', n.name ]"
@click="onColorClick(n.values)"
></div>data: () => ({
colors: [
{ values: [ '#FB253E', '#FFF', '#FFF' ], name: 'red' },
{ values: [ '#19AD6A', '#FFF', '#FFF' ], name: 'green' },
{ values: [ '#FC6621', '#FFF', '#FFF' ], name: 'orange' },
{ values: [ '#1386A3', '#FFF', '#FFF' ], name: 'blue' },
{ values: [ '#FFED00', '#111', '#111' ], name: 'yellow' },
{ values: [ '#00FF00', '#111', '#111' ], name: 'lightgreen' },
{ values: [ '#FFFFFF', '#111', '#111' ], name: 'white' },
],
...
}),
methods: {
onColorClick([ color, textColor, strokeColor ]) {
Object.assign(this, { color, textColor, strokeColor });
},
...
},<tspan x="0" y="-10" text-anchor="middle" alignment-baseline="middle" font-family="'Swiss721BT-RomanCondensed'" :style="{ 'font-size': firstLineFontSize }">{{ firstLine }}</tspan> <tspan x="0" y="17" text-anchor="middle" alignment-baseline="middle" font-family="'Swiss721BT-RomanCondensed'" :style="{ 'font-size': secondLineFontSize }">{{ secondLine }}</tspan> <tspan x="-2" y="45" text-anchor="middle" alignment-baseline="middle" font-family="'Swiss721BT-RomanCondensed'" :style="{ 'font-size': thirdLineFontSize }">{{ thirdLine }}</tspan></text> ... <input type="text" placeholder="enter 1 text line" @input="changeFirstLine"> <input type="number" value='25' @input="changeFirstLineFontSize"><span> px </span> <input type="text" placeholder="enter 2 text line" @input="changeSecondLine"> <input type="number" value='18' @input="changeSecondLineFontSize"><span> px </span> <input type="text" placeholder="enter 2 text line" @input="changeThirdLine"> <input type="number" value='18' @input="changeThirdLineFontSize"><span> px </span>
data: { firstLine: 'Your', secondLine: 'custom', thirdLine: 'text', firstLineFontSize: '25', secondLineFontSize: '18', thirdLineFontSize: '18', ... }, methods: { changeFirstLine: function(event) { this.firstLine = event.target.value; }, changeSecondLine: function(event) { this.secondLine = event.target.value; }, changeThirdLine: function(event) { this.thirdLine = event.target.value; }, changeFirstLineFontSize: function(event) { this.firstLineFontSize = event.target.value; }, changeSecondLineFontSize: function(event) { this.secondLineFontSize = event.target.value; }, changeThirdLineFontSize: function(event) { this.thirdLineFontSize = event.target.value; }, ...
<tspan
v-for="n in lines"
v-text="n.text || n.placeholder"
:x="n.x"
:y="n.y"
:style="{ 'font-size': n.fontSize }"
text-anchor="middle"
alignment-baseline="middle"
font-family="'Swiss721BT-RomanCondensed'"
></tspan>
...
<template v-for="(n, i) in lines">
<input type="text" v-model="n.text" :placeholder="`enter ${i + 1} text line`">
<input type="number" v-model="n.fontSize"><span> px </span>
</template>data: () => ({
lines: [
{ x: 0, y: -10, fontSize: 25, placeholder: 'Your' },
{ x: 0, y: 17, fontSize: 18, placeholder: 'custom' },
{ x: -2, y: 45, fontSize: 18, placeholder: 'text' },
],
...
}),const find = (arr, id) =>
(Array.isArray(arr) ? arr : []).reduce((found, n) =>
found || (n.id === id ? n : find(n.children, id))
, null);selected() {
return this.active.length
? find(this.users, this.active[0])
: null;
},return-object - тогда в active вместо ключей будут объекты. Соответственно, искать ничего не надо, вычисляемое свойство сократится доselected() {
return this.active[0];
},const Component = Vue.extend(...);document.body.appendChild(new Component(...).$mount().$el);<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><p>{{ selected.city }}</p>
<p>{{ selected.priceFrom }}</p>[object Object], отображаемый в качестве value в разметке, то можно сделать computed свойство, которое будет представлять выбранный элемент, оставив в v-model строковую переменную:<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);
},
},