Блог

Главная - Вопросы по программированию - Как использовать динамическое сопоставление маршрутов для создания маршрута с object.id дано в состоянии vuex?

Как использовать динамическое сопоставление маршрутов для создания маршрута с object.id дано в состоянии vuex?

#javascript #vue.js

#javascript #vue.js

Вопрос:

Как упоминалось выше, я пытаюсь сгенерировать маршрут, основанный на свойстве: assetId объектов asset , хранящихся в состоянии vuex.

${asset.assetId} не работает, и я не нахожу подходящего решения. Как правильно определить маршрут?

 <script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      selectionVariants: [
        'All',
        'Portfolio'
      ]
    }
  },
  computed: {
    ...mapState(['portfolio'])
  }
}

</script> 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
  <div class="container">
    <div id="intro">
      <h1>Portfolio</h1>
      <p>Here your actual deposits are shown.</p>
    </div>

     <b-form-group label="Selection Filter" label-for="table-style-variant" label-cols-lg="2">
      <b-form-select
        v-model="tableVariant"
        :options="selectionVariants"
        id="table-style-variant"
      >
        <template #first>
          <option value="">Choose a selection</option>
        </template>
      </b-form-select>
    </b-form-group>

    <b-table striped hover :items="portfolio">
        <template #cell(assetName)="asset">
        <router-link :to="`/market/${asset.assetId}`">
          {{ asset.value }}
        </router-link>
      </template>
    </b-table>
  </div>

</template>

Ответ №1:

Данные слота — это не то asset , внутри него есть другая информация:

 <template #cell(assetName)="slotData">
   <router-link :to="`/market/${slotData.item.assetId}`">
       {{ slotData.value }}
   </router-link>
</template>

slotData.item является asset объектом