Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://js.devexpress.com/Vue/Documentation/Guide/UI_Components/List/Getting_Started_with_List/ below:

Vue List - Getting Started

The List can load data from different data source types. To use a local array, assign it to the dataSource property. If array elements are objects, use the displayExpr property to specify the data field that supplies values to the list. For information on other data source types, refer to the following articles:

$(function () {
    $('#list').dxList({
        dataSource: products,
        displayExpr: 'Name',
    });
});

const products = [{
    ID: 1,
    Name: "HD Video Player",
    Category: "Video Players"
},
{
    ID: 3,
    Name: "SuperPlasma 50",
    Category: "Televisions"
},
{
    ID: 4,
    Name: "SuperLED 50",
    Category: "Televisions"
},
{
    ID: 5,
    Name: "SuperLED 42",
    Category: "Televisions"
},
{
    ID: 6,
    Name: "SuperLCD 55",
    Category: "Televisions"
},
{
    ID: 7,
    Name: "SuperLCD 42",
    Category: "Televisions"
},
{
    ID: 8,
    Name: "SuperPlasma 65",
    Category: "Televisions"
},
{
    ID: 9,
    Name: "SuperLCD 70",
    Category: "Televisions"
},
{
    ID: 10,
    Name: "DesktopLED 21",
    Category: "Monitors"
},
{
    ID: 12,
    Name: "DesktopLCD 21",
    Category: "Monitors"
},
{
    ID: 13,
    Name: "DesktopLCD 19",
    Category: "Monitors"
},
{
    ID: 14,
    Name: "Projector Plus",
    Category: "Projectors"
},
{
    ID: 15,
    Name: "Projector PlusHD",
    Category: "Projectors"
},
{
    ID: 17,
    Name: "ExcelRemote IR",
    Category: "Automation"
},
{
    ID: 18,
    Name: "ExcelRemote BT",
    Category: "Automation"
},
{
    ID: 19,
    Name: "ExcelRemote IP",
    Category: "Automation"
}];

<dx-list
    [dataSource]="products"
    displayExpr="Name">
</dx-list>

import { Component } from '@angular/core';
import { Product, ProductsService } from './products.service';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    products: Product[] = [];

    constructor(service: ProductsService) {
        this.products = service.getProducts();
    }
}

import { Injectable } from '@angular/core';

export interface Product {
    ID: Number,
    Name: String,
    Category: String,
}

const products: Product[] = [{
    ID: 1,
    Name: "HD Video Player",
    Category: "Video Players"
},
{
    ID: 3,
    Name: "SuperPlasma 50",
    Category: "Televisions"
},
{
    ID: 4,
    Name: "SuperLED 50",
    Category: "Televisions"
},
{
    ID: 5,
    Name: "SuperLED 42",
    Category: "Televisions"
},
{
    ID: 6,
    Name: "SuperLCD 55",
    Category: "Televisions"
},
{
    ID: 7,
    Name: "SuperLCD 42",
    Category: "Televisions"
},
{
    ID: 8,
    Name: "SuperPlasma 65",
    Category: "Televisions"
},
{
    ID: 9,
    Name: "SuperLCD 70",
    Category: "Televisions"
},
{
    ID: 10,
    Name: "DesktopLED 21",
    Category: "Monitors"
},
{
    ID: 12,
    Name: "DesktopLCD 21",
    Category: "Monitors"
},
{
    ID: 13,
    Name: "DesktopLCD 19",
    Category: "Monitors"
},
{
    ID: 14,
    Name: "Projector Plus",
    Category: "Projectors"
},
{
    ID: 15,
    Name: "Projector PlusHD",
    Category: "Projectors"
},
{
    ID: 17,
    Name: "ExcelRemote IR",
    Category: "Automation"
},
{
    ID: 18,
    Name: "ExcelRemote BT",
    Category: "Automation"
},
{
    ID: 19,
    Name: "ExcelRemote IP",
    Category: "Automation"
}];

@Injectable({
    providedIn: 'root'
})
export class ProductsService {
    getProducts(): Products[] {
        return products;
    }
}

<template>
    <div id="app-container">
        <DxList
            :data-source="products"
            display-expr="Name">
        </DxList>
    </div>
</template>

<script>
// ...
import { products } from './products';

export default {
    // ...
    data() {
        return {
            products
        }
    },
}
</script>

export const products = [{
    ID: 1,
    Name: "HD Video Player",
    Category: "Video Players"
},
{
    ID: 3,
    Name: "SuperPlasma 50",
    Category: "Televisions"
},
{
    ID: 4,
    Name: "SuperLED 50",
    Category: "Televisions"
},
{
    ID: 5,
    Name: "SuperLED 42",
    Category: "Televisions"
},
{
    ID: 6,
    Name: "SuperLCD 55",
    Category: "Televisions"
},
{
    ID: 7,
    Name: "SuperLCD 42",
    Category: "Televisions"
},
{
    ID: 8,
    Name: "SuperPlasma 65",
    Category: "Televisions"
},
{
    ID: 9,
    Name: "SuperLCD 70",
    Category: "Televisions"
},
{
    ID: 10,
    Name: "DesktopLED 21",
    Category: "Monitors"
},
{
    ID: 12,
    Name: "DesktopLCD 21",
    Category: "Monitors"
},
{
    ID: 13,
    Name: "DesktopLCD 19",
    Category: "Monitors"
},
{
    ID: 14,
    Name: "Projector Plus",
    Category: "Projectors"
},
{
    ID: 15,
    Name: "Projector PlusHD",
    Category: "Projectors"
},
{
    ID: 17,
    Name: "ExcelRemote IR",
    Category: "Automation"
},
{
    ID: 18,
    Name: "ExcelRemote BT",
    Category: "Automation"
},
{
    ID: 19,
    Name: "ExcelRemote IP",
    Category: "Automation"
}];

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import {
    List
} from 'devextreme-react/list';
import { products } from './products';

function App() {
    return (
        <div className="App">
            <List
                dataSource={products}
                displayExpr="Name">
            </List>
        </div>
    );
}

export default App;

export const products = [{
    ID: 1,
    Name: "HD Video Player",
    Category: "Video Players"
},
{
    ID: 3,
    Name: "SuperPlasma 50",
    Category: "Televisions"
},
{
    ID: 4,
    Name: "SuperLED 50",
    Category: "Televisions"
},
{
    ID: 5,
    Name: "SuperLED 42",
    Category: "Televisions"
},
{
    ID: 6,
    Name: "SuperLCD 55",
    Category: "Televisions"
},
{
    ID: 7,
    Name: "SuperLCD 42",
    Category: "Televisions"
},
{
    ID: 8,
    Name: "SuperPlasma 65",
    Category: "Televisions"
},
{
    ID: 9,
    Name: "SuperLCD 70",
    Category: "Televisions"
},
{
    ID: 10,
    Name: "DesktopLED 21",
    Category: "Monitors"
},
{
    ID: 12,
    Name: "DesktopLCD 21",
    Category: "Monitors"
},
{
    ID: 13,
    Name: "DesktopLCD 19",
    Category: "Monitors"
},
{
    ID: 14,
    Name: "Projector Plus",
    Category: "Projectors"
},
{
    ID: 15,
    Name: "Projector PlusHD",
    Category: "Projectors"
},
{
    ID: 17,
    Name: "ExcelRemote IR",
    Category: "Automation"
},
{
    ID: 18,
    Name: "ExcelRemote BT",
    Category: "Automation"
},
{
    ID: 19,
    Name: "ExcelRemote IP",
    Category: "Automation"
}];

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4