账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vueJs需要在同一个页面做操作加载,通过v-show绑定问题。
    36
    0

    现在需要在同一个页面做操作加载,考虑到router没什么必要,通过v-show来绑定。
    左侧是另一个组件leftbar.vue。点击之后通过路由进入另一个页面。点击左侧栏没法刷新。

    右侧栏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>
    
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部