具有嵌套项目属性的 Vuetify 数据表槽

问题描述

我很难弄清楚如何从具有特定 JSON 格式的 v-data-table 插槽中访问项目属性。

绑定到 v-data-table 的项目有一个名为“technicals”的嵌套属性，它还包含每个间隔的几个嵌套属性，如“5m”、“15m”等...

我使用计算属性生成了 v-data-table 标题，一切都显示正常，但现在我想使用表内的插槽访问数据，以使用一些额外的样式等操作 true/false 的布尔值。我就是不知道如何访问插槽标签中的属性。

分配给标题的值具有这种结构

Object.technicals.side.interval.value

其中“side”和“interval”是存储在数据对象中的组件道具。

{
 "market": {
  "id": "xyx"
},"technicals": {
      "buy": {
        "1m": {
          "RSI_OVERSOLD": false,"LOWER_BBAND": false,"UPTRENDING": true,"MFI_OVERSOLD": false,"BULLISH_MACD_CROSS": false
        },"5m": {
          "RSI_OVERSOLD": false,"15m": {
          "RSI_OVERSOLD": false,"UPTRENDING": false,"30m": {
          "RSI_OVERSOLD": false,"1h": {
          "RSI_OVERSOLD": false,"4h": {
          "RSI_OVERSOLD": false,"BULLISH_MACD_CROSS": false
        }
      }
}

  <v-data-table
          :headers="headers"
          :items="tickerStats"
          :sort-by.sync="sortBy"
          :sort-desc.sync="isDescending"
        >
          <template v-slot:item.technicals.side.interval.RSI_OVERSOLD="{ item }">
            <v-chip>doSomething</v-chip>
          </template>
        </v-data-table>

我需要从这一行访问，但我无法从组件（边和间隔）访问道具，也无法通过尝试访问其他东西。

 <template v-slot:item.technicals.side.interval.RSI_OVERSOLD="{ item }">

它只能像这样访问市场 ID，但我不需要修改 ID 列。

 <template v-slot:item.market.id="{ item }">

更新

这是我生成标题的方法

headers() {
      let fnc = this.functions.filter(f => {
        return f.type == this.side;
      });

      let headers = [
        {
          text: "MARKET",align: "start",sortable: true,value: "market.id",type: String
        }
      ];

      let side = this.side;
      for (let i = 0; i < fnc.length; i++) {
        headers.push({
          text: fnc[i].name,type: Boolean,value:
            "technicals[" +
            this.side +
            "]." +
            this.interval +
            "[" +
            fnc[i].name +
            "]"
        });
      }

      return headers;
    }

函数是这种格式的对象数组

{
name: "RSI_OVERSOLD",formatted_name: "RSI OVERSOD"
}

这是 items 数组中一个 item 的结构，用于： items 中我只想显示 market.id 以及作为道具传递给组件的给定侧和间隔的技术数据。

  {
    "id": "ETHUSDT","ticker": {
      "exchange": "Binance","base": "ETH","quote": "USDT","timestamp": 1613375545712,"last": "1753.52000000","open": "1671.49000000","high": "1847.54000000","low": "1655.67000000","volume": "935312.43155000","quoteVolume": "1656379605.10542940","change": "-82.03000000","changePercent": "-4.469","bid": "1753.37000000","bidVolume": "5.70749000","ask": "1753.52000000","askVolume": "0.21402000"
    },"market": {
      "limits": {
        "amount": {
          "min": 0.001,"max": 10000
        },"price": {
          "min": 0.01,"max": 100000
        },"cost": {
          "min": 1
        },"market": {
          "min": 0.001,"max": 10000
        }
      },"precision": {
        "base": 8,"quote": 8,"amount": 3,"price": 2
      },"tierBased": false,"percentage": true,"taker": 0.001,"maker": 0.001,"id": "ETHUSDT","lowercaseId": "ethusdt","symbol": "ETH/USDT","baseId": "ETH","quoteId": "USDT","info": {
        "symbol": "ETHUSDT","pair": "ETHUSDT","contractType": "PERPETUAL","deliveryDate": 4133404800000,"onboardDate": 1569398400000,"status": "TradING","maintMarginPercent": "2.5000","requiredMarginPercent": "5.0000","baseAsset": "ETH","quoteAsset": "USDT","marginAsset": "USDT","pricePrecision": 2,"quantityPrecision": 3,"baseAssetPrecision": 8,"quotePrecision": 8,"underlyingType": "COIN","underlyingSubType": [],"settlePlan": 0,"triggerProtect": "0.0500","filters": [
          {
            "minPrice": "0.01","maxPrice": "100000","filterType": "PRICE_FILTER","tickSize": "0.01"
          },{
            "stepSize": "0.001","filterType": "LOT_SIZE","maxQty": "10000","minQty": "0.001"
          },"filterType": "MARKET_LOT_SIZE",{
            "limit": 200,"filterType": "MAX_NUM_ORDERS"
          },{
            "limit": 100,"filterType": "MAX_NUM_ALGO_ORDERS"
          },{
            "notional": "1","filterType": "MIN_NOTIONAL"
          },{
            "multiplierDown": "0.8500","multiplierUp": "1.1500","multiplierDecimal": "4","filterType": "PERCENT_PRICE"
          }
        ],"orderTypes": [
          "LIMIT","MARKET","STOP","STOP_MARKET","TAKE_PROFIT","TAKE_PROFIT_MARKET","TRAILING_STOP_MARKET"
        ],"timeInForce": [
          "GTC","IOC","FOK","GTX"
        ]
      },"type": "future","spot": false,"margin": true,"future": true,"delivery": false,"active": true
    },"BULLISH_MACD_CROSS": false
        }
      },"sell": {
        "1m": {
          "RSI_OVERBOUGHT": false,"UPPER_BBAND": false,"DOWNTRENDING": false,"MFI_OVERBOUGHT": false,"BEARISH_MACD_CROSS": false
        },"5m": {
          "RSI_OVERBOUGHT": false,"15m": {
          "RSI_OVERBOUGHT": false,"DOWNTRENDING": true,"30m": {
          "RSI_OVERBOUGHT": false,"1h": {
          "RSI_OVERBOUGHT": false,"4h": {
          "RSI_OVERBOUGHT": false,"BEARISH_MACD_CROSS": false
        }
      }
    }
  },

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）