Question

我是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>

Answer 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/

＆＃13;

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
});

＆＃13;

<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>

＆＃13;

Answer 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

迭代数据子属性的Vue js不起作用

2 个答案: