Question

$userchatData = $this->db->get($this->db->dbprefix('usres_chat'))->result_array(); $userdatas = array(); foreach($userchatData as $key => $userdata){ $userdatas[]= array( 'chat_id' => $userdata['chat_id'], 'chat_from' => $userdata['chat_from'], 'created_date' => $userdata['created_date'] ); } $data['ChatdatabyId'] =$userdatas; $data['responseCode'] = '200'; $data['responseMessage'] = 'User listing successfully'; echo json_encode($data);中的第一个项目。使用In [20]: [k for e in a for k in (e if isinstance(e, list) else [e])] ...: Out[20]: [2, 33, 4, 2, 3, 4, 6]。

我可以显示所有帖子，但是一旦我尝试实现显示所有帖子的Vue.js我的组件WP REST API，就会在第一个{{1}时死亡声明。

显然，Vue-router认为没有帖子，所以它没有渲染任何其他内容，但我无法弄清楚如何让它识别home-post-list。我在控制台中没有出现任何错误。

当我查看v-if="posts"时，我看到：

https://www.dropbox.com/s/5441k1kw8ocmzad/Screenshot%202018-05-22%2010.43.24.png?dl=0

因此，Vue似乎工作正常，但道具是空的。我以为我是将主要实例中的道具传递给子组件，但也许我在这里做错了。

我会告诉你我现在的代码。

*** HomePostList组件

posts

*** SinglePost组件

Vue DevTools

***路线＆amp; Vue实例

router-view

***的index.php

const HomePostList = Vue.component('home-post-list', {
  props:['posts'],
  template: `<div class="cell medium-8">
                        <div id="all-posts" class="all-posts" v-if="posts">
                        <div class="grid-x grid-margin-x">
                          <div class="post medium-6 cell" :class="{'medium-12':index===0}" v-for="(post,index) in posts">
                            <div class="img-bg" :class="{'first-post':index === 0}" :style="'background-image: url(' + post._embedded['wp:featuredmedia']['0'].source_url + ')'"></div>
                            <aside class="post-meta grid-x">
                              <div class="cell small-12">
                                <h3>{{ post.title.rendered | limitWords(6) }}</h3>

                              </div>
                              <div class="cell small-6">
                                <div class="post-category" v-for="(category,index) in post.cat_name.slice(0,1)">
                                  <a :href="'/category/' + category.slug">{{ category.cat_name }}</a>
                                </div>
                              </div>
                              <div class="cell small-6">
                                                <p><i class="fal fa-calendar-alt"></i> &nbsp;{{ post.date | parseTime }}</p>
                              </div>
                            </aside>
                          </div>
                        </div>
                    </div>
                  </div>`
});

Answer 1

我通过向router-view元素添加帖子来实现此目的。

<router-view :posts="posts"></router-view>

不确定这是否是正确的方法，但它确实有效。

Vue.js 2路线不起作用。帖子变量无法访问

1 个答案: