Рубрики
Vue.js Vue директива v-bind

Добавление динамических классов в Vue

<template>
<тег v-bind:class="{НазваниеКласса,Код}">
</template>

Код
условие bool, по которому будет добавляться этот класс

Рубрики
Vue вызов в компоненте

Вызов вычисления в компоненте Vue

  • Вызов в отсеке script в методах, хуках
this.$store.getters['ИмяВычисления'](Параметры);
Рубрики
Vue директива v-bind Vue компонент.script.data Vue компонент.script Vue компонент.script.props

Передаём переменную data дочерней компоненте Vue

  • Родительская компонента содержит переменную в data
<template>
<comp v-bind:ИмяПропса="ИмяОбъекта">
</template>

<script>
export default{
data(){
 return {
  ИмяОбъекта: Значение
 }
}
}
</script>
  • Дочерняя компонента comp
    пропсы нельзя изменять
<script>
export default{
props:{
ИмяПропса:{
 type:Array,
 requered:true,
}
}
}
</script>
Рубрики
Vue.js Vue вызов в компоненте

Вызов экшена в компоненте Vue

  • Вызов экшена в script в отсеках

this.$store.dispatch(‘ИмяЭкшена‘);
this.$store.dispatch(‘ИмяМодуля/ИмяЭкшена‘);

Рубрики
Vue хук mounted в компоненте

Пример динамической подгрузки постов

Динамическая подгрузка постов
mounted

хук mounted представляет собой обычную функцию.
Нам необходимо вызвать функцию fetchPosts для того чтобы посты подгрузились сразу при первом открытии приложения.

setTimeout
Динамическая задержка
для того чтобы видеть загрузку

isPostsLoading
модель
индикатор, которая оповещает что загрузка идёт

src\App

<template>
<div class="app">
<h1>Страница с постами</h1>
<my-button
 @click="showDialog"
 style="margin: 15px 0;" кнопка не должна прилипать к заголовку
>Создать пост</my-button>
<my-dialog v-model:show="dialogVisible">

<post-form
@create="createPost"
/>
</my-dialog>

<post-list 
:posts="posts"
@remove="removePost"
v-if="!isPostsLoading"
/>
<div v-else>Идет загрузка...</div>
<div>
</template>

<script>
import PostForm from "@/components/PostForm";
import PostList from "@/components/PostList";
import axios from "axios";
export default{
components:{
 PostList,PostForm,
}
data(){
return {
 posts:[],
 dialogVisible:false, 
 isPostsLoading:false,
}
}
methods:{
 createPost(post,second,third){
  this.posts.push(post);
  this.dialogVisible = false;
 }
 removePost(post) {
  this.posts = this.posts.filter(p => p.id !== post.id)
 },
 showDialog(){
  this.dialogVisible = true;
 },
 async fetchPosts(){
  try{
   this.isPostsLoading = true;
   setTimeout(async()=> {
   const response = await axios.get('https://jsonplaceholder.typicode.com/posts?_limit=10');
   this.posts = responce.data;
   this.isPostsLoading = false;
},1000)
  } catch(e){
   alert('ошибка')
  }
 }
},
 mounted(){
  this.fetchPosts();
 }
}
</script>

<style>
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
.app{
 padding: 20px;
}
</style>