Это <match v-for="match in matches" v-bind:match="match"></match> ошибочные? Могу ли я использовать матч из v-for внутри v-bind на том же элементе?


Это &lt;match v-for="match in matches" v-bind:match="match"&gt;&lt;/match&gt; ошибочные? Могу ли я использовать матч из v-for внутри v-bind на том же элементе?

18.09.2019 11:41:22 Просмотров 95 Источник

Я пытаюсь сделать некоторые HTML для каждого матча в матчах, однако я не совсем уверен, если <match v-for='match in matches' v-bind:match='match'></match> на самом деле правильный.

Более конкретно, я не уверен, могу ли я использовать v-bind:match='match'на том же элементе, что и цикл v-for='match in matches'. Действительно ли информация, содержащаяся в match, отправляется в качестве опоры для компонента?

У вопроса есть решение - Посмотреть?

Ответы - Это &lt;match v-for="match in matches" v-bind:match="match"&gt;&lt;/match&gt; ошибочные? Могу ли я использовать матч из v-for внутри v-bind на том же элементе? / Is <match v-for='match in matches' v-bind:match='match'></match> incorrect? Can I use the match from v-for inside the v-bind on same element?

MarcRo

18.09.2019 11:44:29

То, что вы делаете, является правильным синтаксисом Vue и будет работать. matchдоступно как свойство внутри match.

Однако вы можете переименовать свои переменные. Это одна строка кода, и она уже начинает сбивать с толку ;-).

https://stackoverflow.com/questions/57988541/is-match-v-for-match-in-matches-v-bindmatch-match-match-incorrect-can/57988607#comment102384988_57988607
У вас есть какие-либо рекомендации о том, как я должен изменить переменные? Мой компонент называется match, потому что он буквально отображает совпадение, и я назвал переменную, которую я отправляю в компонент match match, потому что она содержит информацию о совпадении.
Является ответом!
Acerbic

18.09.2019 11:54:20

Да, это так. Это рабочий пример:

Vue.component('match', 
{
props :['match'],
template : `<div><span>{{match.matchName}}</span></div>`

})
var mapp = new Vue({
  el: "#app",
  data: {
    matches: [
      { matchName: "First Match"},
      { matchName: "Second Match"},
      { matchName: "Yet another Match"}
    ]
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<div id="app">
<match v-for='match in matches' v-bind:match='match'></match>
</div>

Помочь в развитии проекта:
Закрыть X