mpvue微信小程序开发中遇到问题

一、条件渲染

官方使用v-if和v-else是没问题的，并且B站教程视频上也是这么使用的，但是我的v-else出不来

1、出现问题：

.vue中代码

<img v-if="isUserShow" class="userImg" :src="userObj.avatarUrl" alt="">
<Button v-else class="btn" open-type="getUserInfo" @getuserinfo="handleGetUserInfo">允许获取用户信息</Button>

 .vue.wxml中代码

<image wx:if="{{isUserShow}}" class="_img data-v-98388602 userImg" src="{{userObj.avatarUrl}}" alt></image>

<view wx:if="{{isUserShow}}" class="_p data-v-98388602 userName">{{userObj.nickName}}</view>

<view wx:if="{{isUserShow}}" class="_div data-v-98388602 goStudy">

 可以看到 isUserShow = false，但是wxml中只有wx:if

2、正确情况：

 如果按一下写法，显示符合逻辑

<img v-if="isUserShow" class="userImg" :src="userObj.avatarUrl" alt="">
<Button v-if="!isUserShow" class="btn" open-type="getUserInfo" @getuserinfo="handleGetUserInfo">允许获取用户信息</Button>

 3、原因猜测：

可以看出问题在 v-else 上，难道是我的mpvue不能转化 v-else

贴一下微信和vue的官方文档：

微信

vue

哎不懂不懂

4、时隔几日这个问题解决了：把 mpvue2.0.0 换成了 mpvue1.0.11

二、vuex 中的问题

（一）

computed:{
  //把状态映射到该组件
  ...mapState(['listData'])
}

 1、问题：

“...”在这的含义是什么

mapState 的返回值是对象我知道，但是([ ])括号里面为什么用数组，为何不用{ }。

2、正确形式：

3、理解与猜测：

如果这是结构赋值再展开的化，把[ ]换成{ }我还能理解，但是不是这样的

该去哪弄懂呢？估计要去看vue了

（二）

 /*这是actions文件*/

export default {
  getList({commit}){
    let listData = data.list_data;
    console.log(listData);
    //这是一个action，提交 对应的mutation、传输数据
    commit('GETLIST', {listData})           //注意：这里{listData}写成listData,mutation收到的是undefine
  }
}

 /*这是mutations文件*/

export default{
  GETLIST(state, {listData}){
    state.listData = listData;
  }
}

1、问题：

其实还是对{ }不理解，看着视频上不加没事，我一不加就不行，可能我和视频在其他步骤上不同造成的吧。

但关键是还是要理解{ }

2、正确：

咦、我好像发现了什么，数据来源：

数据文件往外抛的是 { list_data }

试完了。。。缺一不可，{ } 是必须的。

3、解决：

等以后看视频碰到讲解的吧 

三、列表渲染：无法触发子组件事件

我的两小时有废进去了，教训：以后一言不合就查环境，重装包、

1、问题：

父组件引入子组件，列表渲染子组件并将数据传给子组件

父组件引入子组件 

import ListTmp from '../list_template/list_template'
export default {
  components: {
    ListTmp: ListTmp
  },

列表渲染，传数据

<ListTmp v-for="(item, index) in listData" :key="index" :item="item" :index="index"/>

数据来源见vuex

beforeMount(){
  //每个组件都加上了个$store属性，有个分发方法，向action分发请求
  this.$store.dispatch('getList');//让actions获取list内容并更新store中的state
},
computed:{
  //把状态映射到该组件
  ...mapState(['listData'])
},

 子组件拿到state后，将字段写成动态的，并绑定一个点击事件

子组件拿state

<script>
  export default {
    props: [        //使用props属性
      'item', 'index'
    ],

子组件绑定事件

<template>中的
  <div @tap="listToDetail" class="tmpContainer">
    <div class="avatar_data">
      <img :src="item.avatar" alt="">
      <span>{{item.date}}</span>

<script>中的
methods: {
  listToDetail(){
    console.log('come on');
    wx.navigateTo({
      url: '/pages/detail/main'
    })
  }
}

结果：无法跳转，用console.log()测试，发现不是wx.navigateTo的问题 ，是压根触发不了事件，换了几个绑定事件的属性@click @tap onclick ontap v-on:tap还加了.stop .navtied也不行

2、解决：

打开package.json找到mpvue,发现使用的是2.0.0版本，在网上找了一个mpvue项目( mpvue1.0.11 )直接把他的这个package.json文件复制到我的项目来，发现可以触发事件跳转页面了。

还有一个彩蛋：这篇文章的第一个问题也解决了，哈哈 v-if v-else 的问题

3、理解：

要么是mpvue的新版本有问题，要么是改动了我却不会用

我感觉有问题的可能性大一点

四、列表渲染又来问题了

1、问题：

错误代码：

<template>
  <div v-for="(item,index) in moviesArr" class="movieContainer">
    <img class="movieImg" :src="item.images.large" alt="">
    <div class="movieDetail">
      <p class="movieName">{{item.original_title}}</p>
      <p class="movieYear">年份：{{item.year}}</p>
      <p class="movieDirector">导演：{{item.directors[0].name}}</p>
    </div>
    <p class="movieRating">{{item.rating.average}}</p>
  </div>
</template>

报错：

 - Cannot use v-for on stateful component root element because it renders multiple elements.

翻译：无法在有状态组件根元素上使用v-for，因为它呈现多个元素。

无奈英语水平和前端功力都很薄弱不知道这是啥原因

2、正确：

在外边套一层div就ok了

<template>
  <div>
    <div v-for="(item,index) in moviesArr" class="movieContainer">
      <img class="movieImg" :src="item.images.large" alt="">
      <div class="movieDetail">
        <p class="movieName">{{item.original_title}}</p>
        <p class="movieYear">年份：{{item.year}}</p>
        <p class="movieDirector">导演：{{item.directors[0].name}}</p>
      </div>
      <p class="movieRating">{{item.rating.average}}</p>
    </div>
  </div>
</template>

3、分析：

就是不能在根元素上用v-for

之前以为<template></template>才是根元素，原来最外边的<div></div>才是根元素

四、css中的page样式

<style scoped>

改为

<style>