Bootstrap-vue - Display array data as dropdown in vue js

Question

I have an array of JSON data like :

 loggers = [{
        "allAvailableLevel": ['WARN', 'DEBUG', 'INFO'],
        "level": "WARN",
        "logger": "com.test1",
        "status": "success"
    },
{
        "allAvailableLevel": ['WARN', 'DEBUG', 'INFO'],
        "level": "WARN",
        "logger": "com.test2",
        "status": "success"
    }
    ]

I am using dropdown inside a table column and for that using below code, and basically traversing Loggers array but not able to extract allAvailableLevel data.

 <table class="table table-bordered">
        <thead>
          <tr>
            <th>#</th>
            <th>Class</th>
            <th>Current Level</th>
            <th>All Available Levels</th>
            <!-- Only display "Action" header if level is changed-->
            <th>
              Action
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(logger, index) in loggers" :key="logger">
            <td>{{ index + 1 }}</td>
            <td>{{ logger.logger }}</td>
            <td>{{ logger.level }}</td>
            <td>
              <b-dropdown
                boundary="viewport"
                id="dropdown-dropup"
                size="sm"
                :text="selectedLevelText"
                split
                class="m-2"
              >
                <b-dropdown-item-button
                  v-for="logger in loggers[0].allLevel"
                  :key="logger"
                  @click.prevent="changeLevel(level)"
                  >{{ logger }}</b-dropdown-item-button
                >
              </b-dropdown>
            </td>
            <td v-if="levelChanged">
              <b-button
                size="sm"
                variant="secondary "
                @click.prevent="updateLevel(selectedLevelText)"
                >Update</b-button
              >
            </td>
          </tr>
        </tbody>
      </table>

with above code my dropdown looks like :

I want to display it like this :

How do I traverse my data inside the vue template to get only the data of "allAvailableLevel"?

@palaѕн loggers is an array of json data which I have mentioned above. — skr
– skr, Commented Mar 31, 2020 at 14:53
Then try v-for="logger in loggers[0].allAvailableLevel" and update text like {{ logger }} — palaѕн
– palaѕн, Commented Mar 31, 2020 at 14:55

Boussadjra Brahim · Accepted Answer · 2020-03-31 15:32:37Z

2

You should iterate over that nested array as follows :

 <b-dropdown-item-button
                      v-for="level in logger.allAvailableLevel"
                      :key="level"
                      @click.prevent="changeLevel(level)"
                      >{{ level }}</b-dropdown-item-button
                    >

edited Mar 31, 2020 at 15:32

answered Mar 31, 2020 at 14:55

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

skr Over a year ago

Sorry, I updated my question, now I have more than one element , so hardcoding with Loggers[0] would not solve the problem.

Boussadjra Brahim Over a year ago

it seems that you're looping over that array in order to generate a table with a column containing a dropdown, please share that table code

Syed · Accepted Answer · 2020-03-31 15:47:34Z

0

Do this:

<tr v-for="(logger, index) in loggers" :key="logger">
  <td>{{ index + 1 }}</td>
  ...
  <td>
    <b-dropdown
      boundary="viewport"
      id="dropdown-dropup"
      size="sm"
      :text="selectedLevelText"
      split
      class="m-2"
    >
      <b-dropdown-item-button
        v-for="level in logger.allAvailableLevel"
        :key="level"
        @click.stop="changeLevel(level)"
        >{{ logger }}</b-dropdown-item-button
      >
    </b-dropdown>
  </td>
</tr>

edited Mar 31, 2020 at 15:47

answered Mar 31, 2020 at 14:55

Syed

16.6k15 gold badges128 silver badges159 bronze badges

1 Comment

skr Over a year ago

But how can we do it without hardcoding loggers[0]?

Collectives™ on Stack Overflow

Bootstrap-vue - Display array data as dropdown in vue js

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related