首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >组件之间的数据通信问题

组件之间的数据通信问题
EN

Stack Overflow用户
提问于 2019-04-23 03:06:05
回答 1查看 36关注 0票数 0

我有一个页面,上面有一个页眉,输入是搜索引擎、帖子列表和分页。我决定将这个文件的头文件移到一个单独的vue文件中的一个单独的组件中。在我这样做之后,按标题搜索帖子就停止了,我现在也不能添加帖子了。我认为我需要为我新创建的组件导入我的帖子到一个新文件中,但是如何做到这一点。

My code when it worked(before my changes)

更改后,我的代码不能工作:

我的帖子所在的文件:

代码语言:javascript
复制
<template>
  <div class="app">
    <ul>
      <li v-for="(post, index) in paginatedData" class="post" :key="index">
        <router-link :to="{ name: 'detail', params: {id: post.id, title: post.title, body: post.body} }">
          <img src="src/assets/nature.jpg">
          <p class="boldText"> {{ post.title }}</p>
        </router-link>
        <p> {{ post.body }}</p>

    </li>

  </ul>
  <div class="allpagination">
    <button type="button" @click="page -=1" v-if="page > 0" class="prev"><<</button>
    <div class="pagin">
      <button class="item"
      v-for="n in evenPosts"
      :key="n.id"
      v-bind:class="{'selected': current === n.id}"
      @click="page=n-1">{{ n }} </button>
    </div>
    <button type="button" @click="page +=1" class="next" v-if="page < evenPosts-1">>></button>
  </div>

</div>
</template>

<script>
  import axios from 'axios';
  export default {
    name: 'Pagination',
    data () {
      return {
        search: '',
        current: null,
        page: 0,
        posts: [],
        createTitle: '',
        createBody: '',
        visiblePostID: '',
      }
    },
    watch: {
      counter: function(newValue, oldValue) {
        this.getData()
      }
    },
    created(){
      this.getData()
    },
    computed: {
      evenPosts: function(posts){
        return Math.ceil(this.posts.length/6);
      },

      paginatedData() {
        const start = this.page * 6;
        const end = start + 6;
        return this.posts.filter((post) => {
          return post.title.match(this.search);
        }).slice(start, end);
      },
    },
    methods: {
      getData() {
        axios.get(`https://jsonplaceholder.typicode.com/posts`).then(response => {
          this.posts = response.data
        })
      },

    }
  }
</script>

标题vue:

代码语言:javascript
复制
          AddPost          

代码语言:javascript
复制
<script>
  import axios from 'axios';
  export default {
    name: 'Pagination',
    data () {
      return {
        search: '',
        current: null,
        posts: [],
        createTitle: '',
        createBody: '',
      }
    },
    created(){
      this.getData()
    },
    methods: {
      getData() {
        axios.get(`https://jsonplaceholder.typicode.com/posts`).then(response => {
          this.posts = response.data
        })
      },
      addPost() {
        axios.post('http://jsonplaceholder.typicode.com/posts/', {
          title: this.createTitle,
          body: this.createBody
        }).then((response) => {
          this.posts.unshift(response.data)
        })
      },
    }
  }
</script>

App.vue:

代码语言:javascript
复制
<template>
  <div id="app">
    <header-self></header-self>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  components: {
    name: 'app',
  }
}
</script>
EN

回答 1

Stack Overflow用户

发布于 2019-04-23 12:58:22

您的"posts“组件中有一个依赖于变量this.search的计算属性paginatedData

代码语言:javascript
复制
paginatedData () {
  const start = this.page * 6;
  const end = start + 6;
  return this.posts.filter((post) => {
    return post.title.match(this.search);
  }).slice(start, end);
},

但是该组件中的this.search值不会更新,因为您将填充该值的搜索输入移动到了header组件中。

现在需要做的是确保将更新后的搜索值传递到“paginatedData”组件中,以便paginatedData computed属性检测更改并计算新的posts值。

您现在遇到了在可能没有父/子关系的组件之间传递值的需求。

在您的场景中,我将考虑使用Vue文档中描述的一些Simple State Management来处理此需求。

根据你的应用程序的规模,可能值得为状态管理实现Vuex

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55799729

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档