Как обновить одну коллекцию, когда изменения происходят в другой?

Вадим, это де на стороне сервера надо делать

Как выровнять элементы?

Ankhena, Вариант с прописыванием line-height не работает. Пришлось применить костыль и задать отрицательный margin тегу с классом rating_item

Как выровнять элементы?

Ankhena, хм, код здесь как дополнение. Проблема не существенна. Просто по моему тексту можно накидать правильный пример и на том же сайте. Если Вы хотите помочь, давно бы это сделали, а не писали комментарий по чистоте моего кода. Спасибо.

Как обновлять данные между компонентами?

Алексей, Хук beforeMount. Я его не использовал, в mounted свойство по дефолту принимало пустой массив

Как обновлять данные между компонентами?

Все четко. Решил проблему.

Как обновлять данные между компонентами?

Алексей,
Пропс change меняет при диспатче строку. Либо вызывает экшин create or update. Соответственно вызываются разные запросы

<template>
<div>
// Тут интупы с v-modal
// ....

// Компонент который загружает картинки при выборе и отправляет в 
// родительский компонент массив с именами картинок. А при обновлении 
// карточки передается этот же массив в компонент для отображения имени 
// картинки загруженной
<upload-image @images="getImages" :images="images"></upload-image>

// Кнопка сабмит
// btn 

</div>
</template>

<script>
export default {
    props: {
      change: {
        type: String,
        required: true
      },
      data: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    data() {
      return {
        id: '',
        title: '',
        value: null,
        options: this.tags,
        checkbox: false,
        refLink: '',
        videoLink: '',
        shortText: '',
        summ: '',
        srock: '',
        stavka: '',
        doc: '',
        age: '',
        identif: '',
        job: '',
        pereplata: '',
        prodlenie: '',
        ki: '',
        conditionOne: '',
        conditionTwo: '',
        conditionTree: '',
        conditionFour: '',
        conditionFive: '',
        conditionSix: '',
        prevOne: '',
        prevTwo: '',
        prevThree: '',
        tabOne: '',
        tabTwo: '',
        tabThree: '',
        tabFour: '',
        tabFive: '',
        tabSix: '',
        htmlText: '',
        blockFive: ['','','',''],
        images: []
      }
    },
    async fetch() {
        this.options = await this.$store.dispatch('tag/getAllTagsAdmin')
    },
    mounted() {
      if(this.data) {
        this.id = this.data._id,
        this.images = this.data.images,
        this.title = this.data.title
      }
    },
    methods: {
        async onSubmit() {
          let tags = this.value.map(item => item)
          try {
            const formData = {
              id: this.id,
              tags: tags,
              title: this.title,
              premium: this.checkbox,
              htmlText: this.htmlText,
              images: this.images,
              refLink: this.refLink,
              videoLink: this.videoLink,
              shortText: this.shortText,
              summ: this.summ,
              srock: this.srock,
              stavka: this.stavka,
              doc: this.doc,
              age: this.age,
              identif: this.identif,
              job: this.job,
              pereplata: this.pereplata,
              prodlenie: this.prodlenie,
              ki: this.ki,
              conditionOne: this.conditionOne,
              conditionTwo: this.conditionTwo,
              conditionTree: this.conditionTree,
              conditionFour: this.conditionFour,
              conditionFive: this.conditionFive,
              conditionSix: this.conditionSix,
              prevOne: this.prevOne,
              prevTwo: this.prevTwo,
              prevThree: this.prevThree,
              tabOne: this.tabOne,
              tabTwo: this.tabTwo,
              tabThree: this.tabThree,
              tabFour: this.tabFour,
              tabFive: this.tabFive,
              tabSix: this.tabSix,
              blockFive: this.blockFive
            }
            await this.$store.dispatch(`card/${this.change}`, formData)
            alert(`Карточка ${this.change}`)
          } catch(e) {
            alert('Произошла ошибка')
          }
        },
        getImages(data){
          this.images = data
        }
    }
}
</script>

Я думаю проще без vuex решить. Просто я получаю все как надо, но при обновлении карточки у меня не отображаются данные в дочернем компоненте. А именно массив с именами картинок, хотя он там изначально есть. Возможно хук нужен? Но я использовал beforeMount and mounted

Как обновлять данные между компонентами?

Алексей, Или Вы предлагаете сохранить свойства в data() и подставлять туда данные из стейт?

Как обновлять данные между компонентами?

Алексей, Я так и делаю. Но если я хочу изменить данные, обновить их. При переходе я использую тот же компонент что и при создании с этими же данными. Мне нужно получить уже заполненные данные что я и сделал при создании. Но как мне уже существующие данные изменить и сохранить?
Если реализовать через vuex, то я буду через state in computed свойствах получать данные и подставлять их в инпуты. Если я создаю карточку, то поле будет пустое в стейте и в инпуте будет пусто. Но если я использщую стейт, то я с data() не работаю же. Я должен изменять все уже в state. Я не смогу передать данные при сабмите формы. Тоже самое при обновлении карточки, если я получаю заполненные данные, то как мне с помощью v-modal изменить поле в computed свойстве и как потом сохранить и передать в state?

Как обновлять данные между компонентами?

Алексей, Возмжоно не понял про оббъект. Я делю их на несколько объектов. Допустим 5 свойств я размещаю в объект и так далее. При заполнении они реактивны, но при присваивании существующих свойств, они становятся не реактивны. Когда тупо беру присваиваю объект из стора допустим, в date() объекту.

Как обновлять данные между компонентами?

Алексей, Дак и в мутации мне нужно будет просто добавлять кучу таких же свойств и присваивать payload

Как обновлять данные между компонентами?

Алексей, Они все реактивны. Я их все заполняю. При обновлении карточки, я просто в mount хуке заполняю их данными, которые передаю в props, если они есть. Дело в том, что я хотел бы их в объект запихнуть. Чтобы было нормально обрабатывать на бекенде их. Не хочется городить кучу свойств везде.
По поводу стора. Вы хотите чтобы я положил все данные в стор просто как обычный поля стейта и потом в компоненте реагировать не на данные даты, а на стейт? А как мне при отправке сохранять данные? Куда я буду сохранять их? Сейчас я имею поля в дате и при отправке я сохраняю в объект и передаю их на сервер. А как заполнить в стейт данные через v-modal?

Как обновлять данные между компонентами?

Буду пробовать. Скажите, может подскажете как лучше организовать передачу данных и подписываться на них? У меня есть большой список данных, который необходимо заполнить в админке, а затем отправить на бек. У меня в дате получилось так:

data() {
        return {
          title: '',
          value: null,
          options: this.tags,
          checkbox: false,
          refLink: '',
          videoLink: '',
          shortText: '',
          summ: '',
          srock: '',
          stavka: '',
          doc: '',
          age: '',
          identif: '',
          job: '',
          pereplata: '',
          prodlenie: '',
          ki: '',
          conditionOne: '',
          conditionTwo: '',
          conditionTree: '',
          conditionFour: '',
          conditionFive: '',
          conditionSix: '',
          prevOne: '',
          prevTwo: '',
          prevThree: '',
          tabOne: '',
          tabTwo: '',
          tabThree: '',
          tabFour: '',
          tabFive: '',
          tabSix: '',
          htmlText: '',
          blockFive: ['','','',''],
          images: []
        }
    },

Можно его как-то улучшить? Если я беру его в объект, то данные не реактивны при изменении

Как по трем моделям найти необходимую новость?

Ни капли. Пытаюсь, может просто Вас не понял.

const Tag = require('../models/tag.model')
const Card = require('../models/card.model')
const Post = require('../models/post.model')

module.exports.getData = async (req, res) => {
    try {
        const tag = await Tag.findOne({tag: req.params.data}, function(err, tag) {
            console.log(tag);
            res.json(tag)
        })
        if(tag === null) {
            await (await Card.findOne({card: req.params.data}).populate('comments')).execPopulate((error, card) => {
                res.json(card)
            })
        } else {
            await (await Post.findOne({post: req.params.data}).populate('comments')).execPopulate((error, post) => {
                res.json(post)
            })
        }
    } catch(e) {
        res.status(500).json(e)
    }
}

Как по трем моделям найти необходимую новость?

Например?

Почему при переходе на страницу некоторые данные undefined?

Aetae, Спасибо

Почему при переходе на страницу некоторые данные undefined?

Aetae, Я тоже вот все никак не пойму, а нафига он нужен вообще. Даже не сам хук, а сам нюкст?

Почему при переходе на страницу некоторые данные undefined?

MamaLuyba, Спасибо

Почему при переходе на страницу некоторые данные undefined?

MamaLuyba, но card заполняется до инициализации компонента. Хук fetch выполняется до mounted()

Почему при переходе на страницу некоторые данные undefined?

Я понял, но это почему происходит вообще ?

Как отрисовать динамическе страницы на одном уровне (nuxt)?

Алексей, Уже разобрался. Можно использовать просто asyncData для рендера определенного компонента. Проще чем казалось.