亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

Vue.js - 僅打印值而不是 JSON 鍵值表示法？

Vue.js - 僅打印值而不是 JSON 鍵值表示法？

aluckdog 2022-05-22 16:14:40
相關標記如下所示：<table>   <tbody>     <tr v-for="object in tableData">       <td v-for="field in object">{{field}}</td>     </tr>   </tbody></table>數據基本上是這樣的：{     Internal_key: "TESTKEY_1",     extensiontable_itc: {         description_itc: "EXTENSION_ITC_1"         },     extensiontable_sysops: {         description_sysops: "EXTENSION_SYSOPS_1"     }    }這種類型的對象駐留在數組中。這個數組中可能有任意數量的這些對象。目前，這個設置在 myList.vue 中創建了這個輸出：https://imgur.com/a/GsbqOlC現在，我只想顯示這些值，而不是這個鍵值 JSON 表示法^^ 我該怎么做？
查看完整描述

3 回答

?
慕容708150

TA貢獻1831條經驗 獲得超4個贊

由于您有一些字段是對象，而有些字段不是，您需要對其進行測試。這是一種方法：


<tr v-for="object in data">

  <td v-for="field in object">

    <template v-if="typeof field === 'object'">

      <div v-for="item in field">

        {{ item }}

      </div>

    </template>

    <template v-else>

      {{ field }}

    </template>

  </td>

</tr>


查看完整回答
反對 回復 2022-05-22
?
斯蒂芬大帝

TA貢獻1827條經驗 獲得超8個贊

像這樣的東西應該工作。但是，在將數據放入模板之前僅映射數據可能更有效。


<template v-for="field in object">

    <td v-if="null !== field && typeof(field) === 'object'">

        <span v-for="thingy in field">{{ thingy }}</span>

    </td>

    <td v-else>{{ field }}</td>

</template>


查看完整回答
反對 回復 2022-05-22
?
海綿寶寶撒

TA貢獻1809條經驗 獲得超8個贊

我找到了一個適合我需要的解決方案，這里是相應地處理 OP 中顯示的數據結構并動態生成所需列表的標記：

http://img1.sycdn.imooc.com//6289f1310001052413051032.jpg


<template v-for="element in tableData">

  <tr>

      <template v-for="field in element">


        <template v-if="typeof field==='object'">

          <td v-for="nestedObjectValue in field">

            {{nestedObjectValue}}

          </td>

        </template>


        <template v-else>

          <td>

            {{field}}

          </td>

        </template>


      </template>

      <td><button v-on:click="changeRecord">Aendern</button></td>

  </tr>

</template>


查看完整回答
反對 回復 2022-05-22
  • 3 回答
  • 0 關注
  • 135 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號