慕哥6287543
2022-06-09 11:23:22
我有一組 JSON 數(shù)據(jù),例如: loggers = [{ "allAvailableLevel": ['WARN', 'DEBUG', 'INFO'], "level": "WARN", "logger": "com.test1", "status": "success" },{ "allAvailableLevel": ['WARN', 'DEBUG', 'INFO'], "level": "WARN", "logger": "com.test2", "status": "success" } ]我在表列中使用下拉菜單,并為此使用下面的代碼,并且基本上遍歷 Loggers 數(shù)組但無法提取 allAvailableLevel 數(shù)據(jù)。 <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>使用上面的代碼,我的下拉列表如下所示:我想像這樣顯示它:如何在vue模板中遍歷我的數(shù)據(jù)只獲取“allAvailableLevel”的數(shù)據(jù)?
2 回答

青春有我
TA貢獻1784條經(jīng)驗 獲得超8個贊
您應該按如下方式遍歷該嵌套數(shù)組:
<b-dropdown-item-button v-for="level in logger.allAvailableLevel" :key="level" @click.prevent="changeLevel(level)" >{{ level }}</b-dropdown-item-button >

慕哥9229398
TA貢獻1877條經(jīng)驗 獲得超6個贊
做這個:
<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>
添加回答
舉報
0/150
提交
取消