<a v-else :href="'https://vk.com/wall'+wall.owner_id +'_'+ wall.id"><template>
<div class="walls">
<div class="loading" v-if="loading">Loading...</div>
<div v-if="error" class="error">{{ error }}</div>
<div class="album py-5 bg-light" v-if="walls">
<div class="container">
<div class="row">
<div class="col-md-4" v-for="({ href, id, img, text }, index) in list" :key="index">
<div class="card mb-4 shadow-sm">
<img v-if="img" class="card-img-top" style="height: 225px; width: 100%; display: block;" :src="img">
<div class="card-body">
<a :href="href">
<p class="card-text">{{ text }}</p>
</a>
<div class="d-flex justify-content-between align-items-center">
<small class="text-muted">{{ id }}</small>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template><script>
import axios from 'axios';
const getUrl = (a, b, URL = 'https://vk.com/wall') => `${URL}${a}_${b}`;
export default {
data: () => ({
loading: false,
walls: null,
error: null,
}),
computed: {
list() {
const { walls } = this;
if (!walls) return [];
return walls.map((wall) => {
const { copy_history } = wall;
const { attachments, id, owner_id, text } = copy_history && copy_history[0] ? copy_history[0] : wall;
const href = getUrl(owner_id, id);
const { photo } = (attachments || []).find(({ type }) => type === 'photo');
const img = photo ? photo.photo_1280 : false;
return { href, img, text, id: wall.id };
};
},
},
created() {
this.fetchData();
},
methods: {
async fetchData() {
this.error = this.walls = null;
this.loading = true;
try {
const { data } = await axios.get('/api/walls');
this.walls = data.items;
} catch (error) {
this.error = error.response.data.message || error.message;
} finally {
this.loading = false;
}
}
}
}
</script><template>
<layout-custom>
<!-- тут код компонентов -->
</layout-custom>
</template>router-view, а slot.const router = new Router({
routes: [
{
// Без шаблона
path: '/app',
component: AppPage,
},
{
// С шаблоном
path: '/',
component: LayoutCustom,
children: [
{
path: '/register',
component: RegisterPage,
},
{
path: '/login',
component: LoginPage,
}
],
},
],
});import Vue from 'vue';
import Store from 'vuex';
const store = new Store({ /* настройки хранилища*/});
const app1 = new Vue({
store,
el: '#el1',
/* настройки первого приложения */
});
const app2 = new Vue({
store,
el: '#el2',
/* настройки второго приложения */
});null в state.data, просто потом нужно проверять наличие нужных Вам полей в state, например:$store.state.data && $store.state.data.city ? $store.state.data.city.name : nulllet cityName;
try {
cityName = this.$store.state.data.city.name;
} catch (e) {
cityName = null;
}1) Как вообще правильно подключать стили компонента? Писать style тег во .vue / импортировать из .vue / подгружать вебпапом отдельно в app.scss?
2) Есть ли какая-то разница между import (default) и require при использовании webpack (laravel mix)?
render: function (h) {
if (this.List.length <= 5) return h('');
return h('div', { ... });
}display: none, оставляя сам узел в структуре страницы.
entity[index].name не будет реактивным, т. к. изначально такого значения не существовало, и нужно использовать $set - v-model не подойдет{ entity[xxx].yyy } в методе.
vue inspect для вывода конфигурации в консоль или vue inspect > inspect.js для вывода в файл. Можно выводить не полностью, а конкретный узел.
@click="addPassportRF"addPassportRF возвращал функцию, то можно было бы и со скобками.<span @click="addPassportRF()" class="button"> ведет себя как кнопка, то придерживайтесь семантики и используйте <button>
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js',
},
}