谷歌浏览器下打印出来的是undefined但是火狐浏览器能正常打印出来

Question

<template>

<div class="wrap" ref="wrap">

  <div>

    <div class="list-1">

      <div class="title border-bottom">当前城市</div>

      <div class="content">

        <div class="content__box">

          广州

        </div>

      </div>

      <div class="title border-bottom">热门城市</div>

      <div class="content">

        <div class="content__box" v-for="item of hot" :key="item.id">

          {{item.name}}

        </div>

      </div>

    </div>

    <div class="list-2" v-for="(item, key) of all" :key="key">

      <div class="title" :ref="key">{{key}}</div>

      <div class="content border" v-for="item of item" :key="item.id">{{item.name}}</div>

    </div>

  </div>

</div>

</template>

<script>

import BScroll from 'better-scroll'

export default {

  name: 'AllCities',

  props: {

    hot: Array,

    all: Object,

    letter: String

  },

  mounted () {

    console.log(this.$refs.wrap)

    this.scroll = new BScroll(this.$refs.wrap)

  },

  watch: {

    letter () {

      console.log(this.$refs)

      if (this.letter) {

        console.log(this.$refs[this.letter])

        console.log('end')

      }

    }

  }

}

</script>

这里的

console.log(this.$refs[this.letter])

在谷歌浏览器下打印出来的是undefined但是火狐浏览器能正常打印出来

请问老师是什么原因

Answer 1

Dell 2018-05-03 17:45:12

你打印this.letter.length看一下，两个都是多少

• 提问者 Han #1

  <div      
        v-for="(item, key) of all"
        :key="key"
        @click="handleClick"
      >
        {{key}}
      </div>
  貌似是传值的问题，这样的innertext里面包含了空格所以打出来undefined，但是我看老师的代码也是这样写的啊。如果改成<div      
        v-for="(item, key) of all"
        :key="key"
        @click="handleClick"
      >{{key}}</div>

• 提问者 Han #2

  就是如果格式化的话{{key}}就自己在一行上，传出来的值带有空格

• Dell 回复 提问者 Han #3

  是的，用一下去除空格的函数，还是代码写的问题，不应该有空格啊

点开查看后面2条评论