Vue js遍历数据子属性不起作用

Posted 2023-02-22

【中文标题】Vue js遍历数据子属性不起作用

【英文标题】：Vue js iterating through data sub-properties is not working

【发布时间】：2018-08-28 06:52:27

【问题描述】：

我是 Vue 新手，我正在尝试使用带有嵌套组件的 Vue 将一个元素与一个相当复杂的数据对象绑定。

我相信我已根据文档正确设置，但我没有看到任何与我的情况完全匹配的示例。

我得到的错误是vue.js:584 [Vue warn]: Property or method "factions" is not defined on the instance but referenced during render. 标记中引用的每个 json 对象属性都会显示此消息。我猜这里缺少一些相对简单的东西，但我无法确定那是什么。感谢您的帮助，谢谢！

这是一个小提琴：https://jsfiddle.net/rjz0gfLn/7/

还有代码：

var x = 
  "factions": [
    
      "id": 0,
      "name": "Unknown",
      "img": "Unknown.png"
    ,
    
      "id": 1,
      "name": "Light",
      "img": "Light.png"
    ,
    
      "id": 2,
      "name": "Dark",
      "img": "Dark.png"
    
  ],
  "roles": [
    
      "id": 0,
      "name": "Unknown",
      "img": "Unknown.png"
    ,
    
      "id": 1,
      "name": "Assassin",
      "img": "Assassin.png"
    ,
    
      "id": 2,
      "name": "Mage",
      "img": "Mage.png"
    
  ],
  "cacheDate": 1521495430225
;

console.log("data object", x);

Vue.component("filter-item", 
    template:   `<li class="fitem">
                    <input type="checkbox" class="fcheck" />
                    <img :src="img" class="fimg" />
                    <span class="fname">
                        name
                    </span>
                </li>`);

Vue.component("filter-items", 
    template: `<ul class="flist">
                    <filter-item v-repeat="factions"></filter-item>
                    <li class="fseperator"/>
                    <filter-item v-repeat="roles"></filter-item>
                </ul>`);

var v = new Vue(
  el: "#filters",
  data: x
);

<nav id="filter-drawer">
  <ul id="filters" class="flist">
        <filter-items></filter-items>
    </ul>
</nav>

【参考方案1】：

您必须在这些子组件中将要传递给子组件的每个数据声明为props。此外，您需要使用:fieldnameinchild="value"（v-bind:fieldnameinchild="value" 的简写形式）从父级传递每个道具。

在你的情况下，你需要在几个地方这样做：

家长：

<filter-items :factions="factions" :roles="roles"></filter-items>

还有孩子：

<filter-item v-for="f in factions" :img="f.img" :fimg="f.fimg" :name="f.name" :key="'f'+f.id"></filter-item>
<filter-item v-for="r in roles" :img="r.img" :fimg="r.fimg" :name="r.name" :key="'r'+r.id"></filter-item>

注意，在 vue2 中你要使用 v-for 而不是 v-repeat。

另外，将:key 添加到v-for：

[Vue 提示]: : 使用 v-for 渲染的组件列表应该有明确的键。请参阅https://vuejs.org/guide/list.html#key 了解更多信息。

查看更新的小提琴：https://jsfiddle.net/acdcjunior/rjz0gfLn/21/

var x = 
  "factions": [
    
      "id": 0,
      "name": "Unknown",
      "img": "img.png"
    ,
    
      "id": 1,
      "name": "Light",
      "img": "/a/a6/Light.png"
    ,
    
      "id": 2,
      "name": "Dark",
      "img": "/0/0e/Dark.png"
    
  ],
  "roles": [
    
      "id": 0,
      "name": "Unknown",
      "img": "img.png"
    ,
    
      "id": 1,
      "name": "Assassin",
      "img": "/6/69/Assassin.png"
    ,
    
      "id": 2,
      "name": "Mage",
      "img": "/2/20/Mage.png"
    
  ],
  "cacheDate": 1521495430225
;

console.log("data object", x);

Vue.component("filter-item", 
    template:   `<li class="fitem">
                    <input type="checkbox" class="fcheck" />
                    <img :src="img" class="fimg" />
                    <span class="fname">
                        name
                    </span>
                </li>`,
  props: ['img', 'fimg', 'name']
                
);

Vue.component("filter-items", 
  template: `<ul class="flist">
            	  <filter-item v-for="f in factions" :img="f.img" :fimg="f.fimg" :name="f.name" :key="'f'+f.id"></filter-item>
            	  <li class="fseperator"/>
               <filter-item v-for="r in roles" :img="r.img" :fimg="r.fimg" :name="r.name" :key="'r'+r.id"></filter-item>
             </ul>`,
  props: ['factions', 'roles']
);

var v = new Vue(
  el: "#filters",
  data: x
);

<script src="https://unpkg.com/vue"></script>

<nav id="filter-drawer">
  <ul id="filters" class="flist">
        <filter-items :factions="factions" :roles="roles"></filter-items>
    </ul>
</nav>

【参考方案2】：

factions 属于根 Vue 实例，filter-items 有一个不同的 data 对象。您可能希望将 factions 作为道具传递给 filter-items。

https://vuejs.org/v2/guide/components.html#Passing-Data-with-Props

Vue.component("filter-items", 
    props: ['factions'],
    template: `<ul class="flist">
                <filter-item v-repeat="factions"></filter-item>
                <li class="fseperator"/>
                <filter-item v-repeat="roles"></filter-item>
        </ul>`);


var v = new Vue(
  el: "#filters",
  data: x
);
<nav id="filter-drawer">
  <ul id="filters" class="flist">
        <filter-items :factions="factions"></filter-items>
    </ul>
</nav>

编辑：v-repeat 已弃用，请使用 v-for，并且您不会将道具传递给 filter-item