Поместите переменную цикла в атрибут шаблона - PullRequest
Новая
       7

Поместите переменную цикла в атрибут шаблона

2 голосов
/ 23 июня 2019

Я пытался заставить этот цикл работать, но я получаю сообщение об ошибке

карта не определена

Как я могу поставить 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>

1 Ответ

3 голосов
/ 23 июня 2019

Я не использую 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 , а также и card, поэтому Vue.js упорядочит карты на 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>
...