主页 / 问题 / 686891
Accepted
Tvolex
Asked:2020-07-04 05:36:00 +0800 CST2020-07-04 05:36:00 +0800 CST

Vue.js 2. v-代表不工作

  • 772

你好！

v-for 不在 vue.js 2 中工作 

<div id="app" v-for="user in users" >\{{user.userName}}</div>

let app = new Vue({
   el: "#app",
      data: {
         users: [
            {userName: "A"},
            {userName: "B"},
            {userName: "C"},
         ]
      }
});

只输出一个空字符串

在此处输入图像描述

在 jsfiddle 中它给出了一个错误：

在此处输入图像描述

vue.js

1 个回答

  1. Best Answer

    id="app"您正在尝试 v-for root node ，即 创建多个实例，它必须是一个。这样做：

    <div id="app">
  <div v-for="user in users">
    {{user.userName}}
  </div>
</div>

    下面是一个带有组件的示例（响应评论）：

    Vue.component('user-card', {
  data: () => {
    return {
      users: [{
        username: "A"
      }, {
        username: "B"
      }]
    }
  },
  template: '<div><div v-for="user in users">\{{user.username}}</div></div'
})

new Vue({
  el: '#app'
})
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>

<div id="app">
  <user-card></user-card>
</div>

    • 8

相关问题