鍍金池/ 問答/HTML/ vueJs需要在同一個頁面做操作加載,通過v-show綁定問題。

vueJs需要在同一個頁面做操作加載,通過v-show綁定問題。

現(xiàn)在需要在同一個頁面做操作加載,考慮到router沒什么必要,通過v-show來綁定。
左側(cè)是另一個組件leftbar.vue。點擊之后通過路由進(jìn)入另一個頁面。點擊左側(cè)欄沒法刷新。

右側(cè)欄code

<template>
  <div class="rightBar">
    <p class="rightBar-nav">
      <a href="#">幫助中心</a>
      <span>></span>
      <a href="#">{{ this.$route.query.name }}</a>
    </p>
    <div class="newsList-con" v-for="item in news" v-show="item.id == cate_id & !vshow" :key="item.id">
      <dl class="newsList" v-for="item in item.dataList" :key="item.id">
        <dt><a href='javascript:;' @click="showNextPage">{{ item.title }}</a></dt>
        <dd>{{ item.txt }}</dd>
      </dl>
    </div>
    <div class="newsList-child" v-show="vshow">
      sss
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default{
  props:["vshow"],
  data () {
    return {
      news: [],
      ok: false,
      vshow: false,
      cate_id: 1
    }
  },
  mounted: function () {
    axios.get('static/data/dataBase.json')
      .then((res) => {
        console.log(res)
        this.news = res.data.dataTxt
        if (this.$route.query.id) {
          this.cate_id = this.$route.query.id
        }
      })
      .catch((err) => {
        console.log(err)
      })
  },
  methods: {
    showNextPage: function () {
      this.vshow = !this.vshow
    }
  },
  watch: {
    '$route' (to, from) {
      this.cate_id = this.$route.query.id
    }
  }
}
</script>
回答
編輯回答
敢試

v-show當(dāng)頁面進(jìn)來時就渲染了 只不過是用css display:none屬性隱藏掉了,當(dāng)然不會刷新了。
建議你去看看 v-if和v-show的區(qū)別

2018年7月31日 13:06
編輯回答
怣痛

你的props和data里都定義vshow了,瀏覽器沒警告么

2018年9月3日 17:40
編輯回答
兮顏

使用v-if試試

2018年3月20日 06:42