2022-09-09 20:41:18 +00:00
< template >
< div >
2022-12-19 11:57:07 +00:00
< Head >
< Title > Vue Inplace Component < / Title >
< Meta name = "description" content = "Inplace provides an easy to do editing and display at the same time where clicking the output displays the actual content." / >
< / Head >
2022-09-09 20:41:18 +00:00
< div class = "content-section introduction" >
< div class = "feature-intro" >
< h1 > Inplace < / h1 >
< p > Inplace provides an easy to do editing and display at the same time where clicking the output displays the actual content . < / p >
< / div >
< AppDemoActions / >
< / div >
< div class = "content-section implementation" >
< div class = "card" >
< h5 > Input < / h5 >
< Inplace :closable ="true" >
< template # display >
{ { text || 'Click to Edit' } }
< / template >
< template # content >
< InputText v -model = " text " autoFocus / >
< / template >
< / Inplace >
< h5 > Image < / h5 >
< Inplace >
< template # display >
< span class = "pi pi-search" style = "vertical-align: middle" > < / span >
< span style = "margin-left: 0.5rem; vertical-align: middle" > View Picture < / span >
< / template >
< template # content >
2023-02-06 14:59:12 +00:00
< img src = "https://primefaces.org/cdn/primevue/images/nature/nature1.jpg" / >
2022-09-09 20:41:18 +00:00
< / template >
< / Inplace >
< h5 > Lazy Data < / h5 >
< Inplace @open ="loadData" >
< template # display > View Data < / template >
< template # content >
< DataTable :value ="products" >
< Column field = "code" header = "Code" > < / Column >
< Column field = "name" header = "Name" > < / Column >
< Column field = "category" header = "Category" > < / Column >
< Column field = "quantity" header = "Quantity" > < / Column >
< / DataTable >
< / template >
< / Inplace >
< / div >
< / div >
< InplaceDoc / >
< / div >
< / template >
< script >
import ProductService from '../../service/ProductService' ;
import InplaceDoc from './InplaceDoc' ;
export default {
data ( ) {
return {
text : null ,
products : null
} ;
} ,
productService : null ,
created ( ) {
this . productService = new ProductService ( ) ;
} ,
methods : {
loadData ( ) {
this . productService . getProductsSmall ( ) . then ( ( data ) => ( this . products = data ) ) ;
}
} ,
components : {
InplaceDoc : InplaceDoc
}
} ;
< / script >
