I'm having a hard time figuring out how to access item properties from within a v-data-table slot with a specific JSON format.
The items bound to the v-data-table have a nested property called "technicals" which also contains several nested properties for each interval like "5m", "15m" etc...
I generated the v-data-table headers with a computed property and everything is displaying fine but now I want to access the data with a slot inside the table to manipulate the boolean values of true/false with some additional styling etc. I just can't find out how to access the properties in the slot tag.
The values assigned to the headers are of this structure
Object.technicals.side.interval.value
Where "side" and "interval" are component props stored in the data object.
{
"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,
"LOWER_BBAND": false,
"UPTRENDING": true,
"MFI_OVERSOLD": false,
"BULLISH_MACD_CROSS": false
},
"15m": {
"RSI_OVERSOLD": false,
"LOWER_BBAND": false,
"UPTRENDING": false,
"MFI_OVERSOLD": false,
"BULLISH_MACD_CROSS": false
},
"30m": {
"RSI_OVERSOLD": false,
"LOWER_BBAND": false,
"UPTRENDING": false,
"MFI_OVERSOLD": false,
"BULLISH_MACD_CROSS": false
},
"1h": {
"RSI_OVERSOLD": false,
"LOWER_BBAND": false,
"UPTRENDING": false,
"MFI_OVERSOLD": false,
"BULLISH_MACD_CROSS": false
},
"4h": {
"RSI_OVERSOLD": false,
"LOWER_BBAND": false,
"UPTRENDING": true,
"MFI_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>
I need to get access from this line but I can't access the props from the component (side and interval) and can't access the other things either by trying.
<template v-slot:item.technicals.side.interval.RSI_OVERSOLD="{ item }">
It only works accessing the market ID like so, but I don't need to modify the ID column.
<template v-slot:item.market.id="{ item }">
UPDATE
Here is how I generate the headers
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,
align: "start",
sortable: true,
type: Boolean,
value:
"technicals[" +
this.side +
"]." +
this.interval +
"[" +
fnc[i].name +
"]"
});
}
return headers;
}
Function is an array of objects of this format
{
name: "RSI_OVERSOLD",
formatted_name: "RSI OVERSOD"
}
This is the structure of one item inside the items array used for: items from which I only want to display the market.id and the technicals for the given side and interval passed as a prop to the component.
{
"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",
"base": "ETH",
"quote": "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"
},
{
"stepSize": "0.001",
"filterType": "MARKET_LOT_SIZE",
"maxQty": "10000",
"minQty": "0.001"
},
{
"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
},
"technicals": {
"buy": {
"1m": {
"RSI_OVERSOLD": false,
"LOWER_BBAND": false,
"UPTRENDING": true,
"MFI_OVERSOLD": false,
"BULLISH_MACD_CROSS": false
},
"5m": {
"RSI_OVERSOLD": false,
"LOWER_BBAND": false,
"UPTRENDING": true,
"MFI_OVERSOLD": false,
"BULLISH_MACD_CROSS": false
},
"15m": {
"RSI_OVERSOLD": false,
"LOWER_BBAND": false,
"UPTRENDING": false,
"MFI_OVERSOLD": false,
"BULLISH_MACD_CROSS": false
},
"30m": {
"RSI_OVERSOLD": false,
"LOWER_BBAND": false,
"UPTRENDING": false,
"MFI_OVERSOLD": false,
"BULLISH_MACD_CROSS": false
},
"1h": {
"RSI_OVERSOLD": false,
"LOWER_BBAND": false,
"UPTRENDING": false,
"MFI_OVERSOLD": false,
"BULLISH_MACD_CROSS": false
},
"4h": {
"RSI_OVERSOLD": false,
"LOWER_BBAND": false,
"UPTRENDING": true,
"MFI_OVERSOLD": false,
"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,
"UPPER_BBAND": false,
"DOWNTRENDING": false,
"MFI_OVERBOUGHT": false,
"BEARISH_MACD_CROSS": false
},
"15m": {
"RSI_OVERBOUGHT": false,
"UPPER_BBAND": false,
"DOWNTRENDING": true,
"MFI_OVERBOUGHT": false,
"BEARISH_MACD_CROSS": false
},
"30m": {
"RSI_OVERBOUGHT": false,
"UPPER_BBAND": false,
"DOWNTRENDING": true,
"MFI_OVERBOUGHT": false,
"BEARISH_MACD_CROSS": false
},
"1h": {
"RSI_OVERBOUGHT": false,
"UPPER_BBAND": false,
"DOWNTRENDING": true,
"MFI_OVERBOUGHT": false,
"BEARISH_MACD_CROSS": false
},
"4h": {
"RSI_OVERBOUGHT": false,
"UPPER_BBAND": false,
"DOWNTRENDING": false,
"MFI_OVERBOUGHT": false,
"BEARISH_MACD_CROSS": false
}
}
}
},
