Невозможно поместить sh в массив из одного Vue компонента в другой. Куда я иду не так? - PullRequest
Новая
       3

Невозможно поместить sh в массив из одного Vue компонента в другой. Куда я иду не так?

0 голосов
/ 09 февраля 2020

Я пробовал через Vuex, используя Store (просто для практики, тоже не сработало). Поскольку это небольшой проект, я решил отказаться от использования центрального хранилища и попытался использовать eventBus. Я не могу точно определить, почему ничто не подталкивает (или не сдвигает при использовании .unshift) к моему пустому массиву. Никаких ошибок не выходит в консоли. Используя console.log в моей функции, я вижу, что данные регистрируются и, следовательно, принимаются компонентом, но ничто не выталкивает в массив.

Ниже приведен мой код для того, чтобы компонент отправлял данные компоненту, получающему данные:

Данные отправки компонента: 

<form class="form-group mt-4">
           <label for="blogTitle"><h4>Blog Title</h4></label>
           <input 
                type="text" 
                class="form-control" 
                id="blogTitle"
                v-model="blogTitle">
                <p>{{blogTitle}}</p>

           <label class="mt-3" for="blogBody"><h4>Blog Body</h4></label>
           <textarea 
                class="form-control no-resize" 
                name="entry" 
                id="blogBody" 
                cols="30" 
                rows="10"
                v-model="blogBody"></textarea>
                <p>{{blogBody}}</p>
            <button 
                class="btn btn-lg btn-dark mt-3"
                @click="postBlog">Post Blog</button>
       </form>
<script>
import {eventBus} from '../main'

export default {
    data() {
        return {
            blogTitle: '',
            blogBody: ''
        }
    },
    methods: {
        postBlog() {
            eventBus.$emit('newBlogTitle', this.blogTitle);
            console.log(this.blogTitle);
        }
    },
    computed: {

    }
}
</script>

Компонент, получающий данные: 

<div
        class="card ml-5 mr-5 mt-5"
        v-for="blog in blogs"
        :key="blog.id"
      >
        <div class="card-header alert-light text-info">
          <h3>{{ blog.blogTitle }}</h3>
          <small>
            <em>{{ getDate() }}</em>
          </small>
        </div>
        <div class="card-body">
          <p>{{ blog.blogBody }}</p>
        </div>
      </div>

<script>
import History from "./components/History";
import { eventBus } from "./main";

export default {
  data() {
    return {
      blogs: []
    };
  },
  methods: {
    getDate() {
      const timeNow = new Date();
      return timeNow.toLocaleDateString();
    }
  },
  computed: {},
  components: {
    "blog-history": History
  },
  created() {
    let vm = this;
    eventBus.$on("newBlogTitle", data => {
      console.log(data);
      vm.blogs.push(data);
    });
  }
};
</script>
...