Блог

Главная - Вопросы по программированию - Отображение списка в vue

Отображение списка в vue

#vue.js

Вопрос:

Я просматриваю список товаров корзины в vue, и мне нужно получить индекс каждого товара. Я думал, ты просто сделаешь что-нибудь подобное

   <ul class="crt-Push_Items">
    <li class="crt-Push_Item" v-for="(lineItem, index) in lineItems" :key="lineItem.key">
      <PushCartItem :lineItem="lineItem" />
    </li>
  </ul>

И

 <p class="crt-PushItem_Price"><span class="money" data-line-index="{{ index }}">{{ formatMoney(lineItem.line_price) }} </span></p>

Но это не отображается, и я получаю ошибку
[Предупреждение Vue]: Свойство или метод «индекс» не определен в экземпляре, но на него ссылаются во время визуализации. Убедитесь, что это свойство является реактивным, либо в параметре данные, либо для компонентов на основе классов, инициализировав свойство. См.: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

Комментарии:

1. это: data-line-index="{{ index }}" не похоже на вю. Разве ты не имеешь в виду :data-line-index="index"

2. @Справедливое замечание ThomasKuhlmann даже если я только что сделал <p class=»crt-PushItem_Price»><span class=»money»>{{ formatMoney(lineItem.line_price) }} {{ индекс }}</span></p> он все еще не работает

3. Попробуйте переключиться с v-for=... in ... на v-for=... of ... . И если это не сработает, можете ли вы показать весь код целиком?

Ответ №1:

Я предполагаю, что эта строка

<p class="crt-PushItem_Price"><span class="money" data-line-index="{{ index }}">{{ formatMoney(lineItem.line_price) }} </span></p>

является компонентом PushCartItem, поэтому для получения index свойства вам необходимо использовать реквизит, потому что в противном случае у вас не будет доступа к нему, как это:

 <template>
  <p class="crt-PushItem_Price">
    <span class="money" :data-line-index="index">
      {{ formatMoney(lineItem.line_price) }}
    </span>
  </p>
</template>
<script>
export default {
  name: 'PushCartItem',
  props: {
    index: {
      type: Number,
      required: true
    },
    lineItem: {
      type: Object,
      required: true,
    }
  },
  methods: {
    formatMoney(price) {
      // do something with the price
    }
  }
}
</script>

Этот ответ основан на моих предположениях, если у вас все еще есть ошибка, пожалуйста, дайте мне больше информации или подробностей об этом, чтобы помочь вам.

Ответ №2:

Вам нужно передать индекс из родительского компонента следующим образом.

 <ul class="crt-Push_Items">
<li class="crt-Push_Item" v-for="(lineItem, index) in lineItems" :key="lineItem.key">
  <PushCartItem :lineItem="lineItem" :index="index" />
</li></ul>

Ответ №3:

Попробуйте это:

 <ul class="crt-Push_Items">
    <li class="crt-Push_Item" v-for="(lineItem) in lineItems" :key="lineItem.key">
      <PushCartItem :lineItem="lineItem" />
    </li>
  </ul>

Или это:

 <ul class="crt-Push_Items">
    <li class="crt-Push_Item" v-for="(lineItem, index) in lineItems" :key="index">
      <PushCartItem :lineItem="lineItem" />
    </li>
  </ul>
Метки: