Question

我正在尝试显示数据数组中的列表，但收到错误：>>> import sympy >>> >>> sympy.isprime(5) True >>> list(sympy.primerange(0, 100)) [2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97] >>> sympy.randprime(0, 100) 83 >>> sympy.randprime(0, 100) 41 >>> sympy.prime(3) 5 >>> sympy.prevprime(50) 47 >>> sympy.nextprime(50) 53 >>> list(sympy.sieve.primerange(0, 100)) [2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97]。

HTML

cannot read property 'name' of undefined

的JavaScript

<div id="list">
  <myitems v-for="item in list" v-bind:my="item">
</div>

我认为我无法匹配var items = Vue.component('myitems', { props: ['my'], template: `<li>{{my.name}} {{my.age}}</li>` }); new items({ data: { list: [ {name: 'myName', age: 25} ] } }).$mount("#list");和道具item in list，但我不确定该怎么做。

Answer 1

我相信问题出在你的HTML中。 <myitems>标记应位于v-for指令的范围内，因此不应在<myitems>标记上声明。尝试这样的事情：

<强> HTML

<div id="list" v-for="item in list" >
  <myitems  v-bind:my="item"></myitems>
</div>

Answer 2

好的，您的代码中存在许多问题。

首先 - 你还没有定义根Vue实例，应该是这样的：

new Vue({
  data: {
    list: [
      {name: 'myName', age: 25}
    ]
  }
}).$mount("#list");

你的组件注册是好的，保持这样：

var items = Vue.component('myitems', {
  props: ['my'],
  template: `<li>{{my.name}} {{my.age}}</li>`
});

您忘了将您的组件包装到ul，因为模板会返回li

<div id="list">
  <ul>
    <myitems v-for="item in list" v-bind:my="item"></myitems>
  </ul>
</div>

工作示例：https://jsfiddle.net/am5Ldp9k/

Answer 3

您的代码中有几个问题。首先，您不需要为您注册的Vue组件分配变量。在您使用Vue.component注册后，它们将随时可用：

Vue.component('myitems', {
  props: ['my'],
  template: '<li>{{my.name}} {{my.age}}</li>'
});

其次，您需要一个根组件。您可以致电new Vue()：

来执行此操作

new Vue({
  el: '#list',
  data: {
    list: [{ name: 'myName', age: 25 }]
  }
});

您需要传入元素ID /类作为根元素，以及要传递给子元素的任何数据。一旦你这样做，它应该正常工作。这是一个工作示例的jsfiddle：https://jsfiddle.net/coligo/49gptnad/

想用vue.js制作清单

3 个答案: