как экспортировать теги и вычисляемые функции в основной App.vue из компонентов в VueCLI - PullRequest
Новая
       52

как экспортировать теги и вычисляемые функции в основной App.vue из компонентов в VueCLI

0 голосов
/ 31 октября 2019

Я в самом начале с VUE CLI 3, и мне было интересно, смогу ли я очистить импорт кода из компонентов в основной App.vue, например, теги внутри шаблона этих компонентов или даже вычисленные функциииз этих компонентов, здесь подробно моя проблема:

Это один из моих компонентов (заголовок), и я хочу экспортировать этот входной тег и его вычисленную функцию в основной App.vue без точной записи всего этого шаблонакод и сценарии там. 

<template>
    <div>
       <input type='text' v-model='search' placeholder='Search for Tittle or Author'/>
    </div>
</template>
<script>
export default {
    name:"header",
    props:{
        header:Object
    },
    computed: {
       filteredTitles:function()
       {
         return this.bookLists.filter((data)=>{return data.title.toUpperCase().includes(this.search.toUpperCase())})
       }
    }
}
</script>

Это мой файл App.Vue, в котором уже импортирован этот компонент, но дело даже в том, что элемент уже был импортирован, вход не отображается, если я не напишу его код внутри приложения. vue template tag на самом деле. 

<template>
  <div id="app">
    <div class="card-flipping">
      <books v-for="(books,index) in bookLists" v-bind:key="index" v-bind:books="books" />
    </div>
  </div>
</template>

<script>
import books from "./components/books.vue";
import header from './components/header.vue';

export default {
  name: "app",
  components: {
    header,
    books,

  },
  data() {
    return {
      bookLists: []
    };
  },
  methods: {
    getJsonData() {
      fetch(" https://api.myjson.com/bins/zyv02 ", {
        method: "GET"
      })
        .then(response => {
          return response.json();
        })
        .then(bookStore => {
          this.bookLists = bookStore.books;
        })
        .catch(error => {
          console.log(error);
        });
    }
  },
  computed: {
       filteredTitles:function()
       {
         return this.bookLists.filter((data)=>{return data.title.toUpperCase().includes(this.search.toUpperCase())})
       }
    },
  created() {
    this.getJsonData();
  }
};
</script>

Может кто-нибудь мне помочь, пожалуйста?

...