javascript - 将循环变量放入模板的属性中

Question

我一直试图让这个循环工作，但我一直收到错误

卡未定义

如何img将卡片对象的属性放入模板中？

function Board() {
  this.cards = [new Card()];
}

function Card() {
  this.img = 'img.png';
}

Vue.component('card', {
  props: ['card'],
  template: '<img v-bind:src="card.img">'
});

let app = new Vue({
  el: '#app',
  data: {
    board: new Board()
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <card v-for="card in board.cards" v-bind:key="card.img">
</div>

标签： javascriptvuejs2vue-component

Answer 1

我不做 Vue.js，但让我大吃一惊的是，你说你的card组件需要一个card属性，但你却给了它一个key属性。跳出来的另一件事是试图进入card.img两个地方（模板和标记）。

如果您在标记中更改v-bind:key="card.img"为v-bind:card="card"（或:card="card"），它会起作用：

function Board()
{
  this.cards = [new Card()];
}

function Card()
{
  this.img = 'img.png';
}

Vue.component('card',
{
  props:['card'],
  template: '<img v-bind:src="card.img">'
});

let app = new Vue(
	 {
	     el:'#app',
	     data:
	     {
		     board: new Board()
	     },
	 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
	<card v-for="card in board.cards" v-bind:card="card">
</div>

或者，如果您希望key Vue.jscard将卡片按顺序排列，card.img您将同时拥有：

function Board()
{
  this.cards = [new Card()];
}

function Card()
{
  this.img = 'img.png';
}

Vue.component('card',
{
  props:['card'],
  template: '<img v-bind:src="card.img">'
});

let app = new Vue(
	 {
	     el:'#app',
	     data:
	     {
		     board: new Board()
	     },
	 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
	<card v-for="card in board.cards" v-bind:key="card.img" v-bind:card="card">
</div>