vue.js 用v-for循环不出，并提示错误

发布于 2022-09-12 23:39:42 字数 1408 浏览 27 评论 0

用v-for嵌套循环，能显示item2内容，但不能显示item的内容并报错，昨天试了一下午也不知道是什么原因导致的，望大神指教！小弟不胜感激！！！

html：

<head>
    <meta charset="utf-8"> 
    <title>表格</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>产品图片</th>
                    <th>颜色</th>
                    <th>尺码</th>
                    <th>库存</th>
                </tr>
            </thead>
            <tbody>
                <div v-for="item in color">
                    <tr v-for="item2 in size">
                        <td>我是图片</td>
                        <td>{{item}}</td>
                        <td>{{item2}}</td>
                        <td>230</td>
                    </tr>
                </div>
            </tbody>
        </table>
    </div>
</body>

JS vue：

<script>
    var app = new Vue({
        el: "#app",
        data: {
            color:['白色','黑色'],
            size:['S','M','XL']
        }
    })
</script>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

娇妻 2022-09-19 23:39:42

产生问题的原因，div里嵌套tr在html里面是非法的，浏览器意识到了这一点这一点所以把div往上提升到了table外面所以解析出来的render函数table是和div同级的所以在tr中不能获得div里面的item变量,下面是解析时实际使用的模板和解析出来的render函数,可以看到嵌套关系没了，变成同级了

实际的模板

      <div v-for="item in color">
            </div>
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>产品图片</th>
            <th>颜色</th>
            <th>尺码</th>
            <th>库存</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item2 in size">
              <td>我是图片</td>
              <td>{{item}}</td>
              <td>{{item2}}</td>
              <td>230</td>
            </tr>
          
        </tbody>
      </table>

解析出来的render函数

(function anonymous() {
  with (this) {
    return _c(
      'div',
      { attrs: { id: 'app' } },
      [
        _l(color, function (item) {
          return _c('div')
        }),
        _c('table', { staticClass: 'table table-bordered' }, [
          _m(0),
          _v(' '),
          _c(
            'tbody',
            _l(size, function (item2) {
              return _c('tr', [
                _c('td', [_v('我是图片')]),
                _v(' '),
                _c('td', [_v(_s(item))]),
                _v(' '),
                _c('td', [_v(_s(item2))]),
                _v(' '),
                _c('td', [_v('230')]),
              ])
            }),
            0
          ),
        ]),
      ],
      2
    )
  }
})

解决办法,规范元素的嵌套关系

    <table class="table table-bordered">
      <thead>
        <tr>
          <th>产品图片</th>
          <th>颜色</th>
          <th>尺码</th>
          <th>库存</th>
        </tr>
      </thead>
      <tbody>
        <template v-for="item of color">
          <tr v-for="item2 in size">
            <td>我是图片</td>
            <td>{{item}}</td>
            <td>{{item2}}</td>
            <td>230</td>
          </tr>
        </template>
      </tbody>
    </table>

回复收藏 0

叹倦 2022-09-19 23:39:42

color和size没有关联，为什么要使用v-for嵌套，item访问不到，应该是作用域的原因。
错误里面提供此链接 https://cn.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties 从文中可以看到当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。
是不是可以理解为第二个v-for并没有item的setter和getter方法，你没办法使用{{item}}获取他的值

在搜索下其他人的v-for嵌套例子，并没有像你这种无关联数据使用嵌套的问题

后来，把你的代码copy到项目里面测试了一下，我的执
但是我发现的你data数据定义为什么不是下面这样的，里面需要return，奇怪你为什么可以显示item2？？？？

data () {
    return {
            color:['白色','黑色'],
            size:['S','M','XL']
    }
  }

回复收藏 0

~没有更多了~

关于作者

溇涏

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

vue.js 用v-for循环不出，并提示错误

html：

JS vue：

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

安静被遗忘

喔爱吃橙子

草莓味的萝莉

梦里兽

mb_83J3Cyxa

时间海

友情链接

vue.js 用v-for循环不出，并提示错误

html：

JS vue：

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

安静被遗忘

喔爱吃橙子

草莓味的萝莉

梦里兽

mb_83J3Cyxa

时间海

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。