I'm trying to make pagination in Vuejs 2 project
i write a code like in this demo
https://jsfiddle.net/os7hp1cy/48/
it's work fine in Vuejs 1 (vue-1.0.23)
however when i use this code with Vuejs 2 (vue#2.4.2) it's show me this error message :
[Vue warn]: Property or method "paginate" is not defined on the instance
but referenced during render. Make sure to declare reactive data
properties in the data option.
(found in <Root>)
how i can fix that error
thanks
In your code have this line:
v-for="user in users | filterBy searchKey | paginate"
And all filters are removed in vue2 so your code won't work https://v2.vuejs.org/v2/guide/migration.html#Filters
Moreover, you should not mount vue to body:
[Vue warn]: Do not mount Vue to <html> or <body> - mount to normal elements instead.
You can check my working code: https://jsfiddle.net/os7hp1cy/187/
I've forked #imcvampire's code and make a working version for Vue 2 due to this filter migration https://v2.vuejs.org/v2/guide/migration.html#Filters-Outside-Text-Interpolations-removed.
paginate method is moved to computed:
paginate: function() {
if (!this.users || this.users.length != this.users.length) {
return
}
this.resultCount = this.users.length
if (this.currentPage >= this.totalPages) {
this.currentPage = this.totalPages
}
var index = this.currentPage * this.itemsPerPage - this.itemsPerPage
return this.users.slice(index, index + this.itemsPerPage)
}
WARNING: I didn't apply the text filter, just the pagination first.
https://jsfiddle.net/c1ghkw2p/
Related
I am struggling to pull through the api to the front end. I completed it successfully with
https://jsonplaceholder.typicode.com/ Just mapped out the arrays. i am struggling however to pull through this seperate api I wanted to use
https://gateway.marvel.com/v1/public/comics?apikey=xxxxxxxxxxxxxxxx&ts=redant&hash=140e85a50884cef76d614f6dacada288
the erro is..
"Uncaught TypeError: Cannot read properties of undefined (reading 'results')"
so clearly it isnt actually able to get hold of results
What am I doing wrong?
import React, {Component} from 'react';
import './App.css';
class App extends Component {
constructor() {
super();
this.state = {
list: []
};
}
componentDidMount() {
fetch('https://gateway.marvel.com/v1/public/comics?apikey=3cb62d086d5debdeea139095cbb07fe4&ts=redant&hash=140e85a50884cef76d614f6dacada288')
.then (response => response.json())
.then(users => this.setState({list:users}))
}
render() {
return (
<div className='App'>
{
this.state.list.data.results.map(result =>
<h1 key={result.id}>{result.urls}</h1>
)
}
</div>
)
}
}
export default App
The error Uncaught TypeError: Cannot read properties of undefined (reading 'results') in your code means that this.state.list.data returns as undefined. This means that you'll need to focus on your state property list to ensure that it has a data property. As we see in your constructor, data is initialized to an empty array which does not contain the data property.
Something we can do to prevent the error is to surround your code with an undefined check:
if (this.state.list.data != undefined) {
this.state.list.data.results.map(result =>
<h1 key={result.id}>{result.urls}</h1>
)
}
At this point, though, we don't know if your API call is returning good data or not since your program throws the error before that (since the fetch and setState are asynchronous), so the code above mainly addresses the error that you're getting rather than focusing on the "pull through the api to the front end" portion of your question.
Here's what you can do inside your then part after fetching the results
this.setState({list:users.data.results}
And inside the map function, do the following:
this.state.list.map(result =>
<h1 key={result.id}>{result.urls}</h1>
You are getting an error because List is initially empty it doesn't have any key called as results, once you fetch the result only then can you loop through your result.
Another solution would be to simply add a loader, you can control that via state as well.
FYI: Products is my cms element name.
As shown in shopware 6 guides, I have created a file
DataResolver/ProductsCmsElementResolver.php
which has an enrich method which helps to extend data. In there I try to access the configs of my custom cms element with:
$config = $slot->getFieldConfig();
$productListType = $config->get('products')->getValue();
That, however always returns the default value that was set during the registration of the element:
Shopware.Service('cmsService').registerCmsElement({
name: 'products',
label: 'das.elements.customProductsElement.label',
component: 'sw-cms-el-products',
configComponent: 'sw-cms-el-config-products',
previewComponent: 'sw-cms-el-preview-products',
defaultConfig: {
products: {
source: 'static',
value: ''
}
}
});
I did it exactly as it is shown in the following guides:
https://developer.shopware.com/docs/guides/plugins/plugins/content/cms/add-cms-element
https://developer.shopware.com/docs/guides/plugins/plugins/content/cms/add-data-to-cms-elements#create-a-data-resolver
Could anyone share a sample of code where you get the value of config as a variable and not static value?
What I was doing wrong was that I forgot to write the .value in computed methods:
computed: {
products() {
return this.element.config.products.value;
}
},
However I also found such function call in shopware source codes which was not mentioned in the docs:
methods: {
createdComponent() {
this.initElementConfig('youtube-video');
this.initElementData('youtube-video'); // this line was not present in docs
}
}
I assume you haven't done any further handling of the product data in your config component, as you do not mention it.
I suggest having a look at the default cms components like for example shopware/administration/Resources/app/administration/src/module/sw-cms/elements/product-slider/config/index.js where you can see how product data is handled :)
I'm just getting to grips with ViewComponents in my Razor pages application.
I have a ViewComponents folder within my project that contains my ViewComponent .cs code:
public class RemoveFromCartViewComponent : ViewComponent
{
public IViewComponentResult Invoke()
{
var result = "123";
return View(result);
}
}
I then have another folder within Pages/Shared/Components called RemoveFromCart. Within this folder I have my default.cshtml
#model string
<h2>
#Model
</h2>
Simply putting the string within a h2 tag.
In my projects Layout.cshtml file I am invoking this ViewComponent:
<div>
#await Component.InvokeAsync("RemoveFromCart")
</div>
When I start my project, the error I get is:
*InvalidOperationException: The view 'Components/RemoveFromCart/123' was not found. The following locations were searched:
/Pages/Components/RemoveFromCart/123.cshtml
/Pages/Shared/Components/RemoveFromCart/123.cshtml
/Views/Shared/Components/RemoveFromCart/123.cshtml*
This is indication my view should be called 123.cshtml which doesnt seem right. What am I doing wrong here? I should simply expect to see the text 123 appear
Thanks
By returning View("123"), you are using this overload:
public ViewViewComponentResult View (string viewName)
Returns a result which will render the partial view with name viewName.
So you are passing the view name, instead of a string value as the view’s model.
You can change that by explicitly calling the View<TModel>(TModel) overload instead:
public IViewComponentResult Invoke()
{
var result = "123";
return View<string>(result);
}
In the long run, I would suggest you to create a model class instead so that you can pass an object instead of just a string. This will avoid having this particular problem and you are also able to easily expand the model contents later on.
I seem to be having an issue with the vue lifecycle - the global objects that I'm retrieving data in the DOM using something like {{ family.plusOne }} is defined.
When I'm using it as an attribute such as :checked="family.plusOne" //expecting true as value, it's undefined.
I tried running the :check="callFunction()" and logging it to console.
I get two calls, one saying
family.plusOne is undefined
and another log to console saying
family.plusOne being true
which is the value I expected.
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch">
<input type="checkbox" id="switch" #change="setPlusOne($event.target.checked)" class="mdl-switch__input" :checked="(family.plusOne == 1)"/>
<span class="mdl-switch__label" >{{family.plusOne == 1}}</span>
</label>
The {{family.plus ==1 }} within the span displays true but the :checked="(family.plusOne ==1)" is false
First, if you are passing just family.plusOne, what is the result in the child?, undefined?
Secondly, may you can use a computed property like
:checked="computedFamilyPlusOne"
computed: {
computedFamilyPlusOne: {
if(this.family.plusOne == 1){
return true
}else {
return false
}
}
}
My guess is that your family object does not exist as part of the default data binding in the data() {} method that is usually on a Vue.js component. That would mean that before the component is mounted, Vue doesn't know the value when it compiles the template, so it appears as though the value is undefined. Then, at some point, you are probably updating ONLY that property of the family object. This means that the reactive-state of the object has never changed, so Vue.js doesn't know that it needs to recompute the template (reactive "gotcha").
To verify that I am correct, make sure that you use the Vue.set() method, or re-bind a new object with the updated property value for the family object.
I played around with the lifecycle phases
created() {
this.populatePeople();
},
updated() {
componentHandler.upgradeDom();
},
This allowed me to update the data before the DOM was loaded and following some solutions, I call componentHandler.upgradeDom() to show the switches and radio buttons correctly.
I have this basic layout. I want to include a dynamic header to be included in the template. +header should be like this +{{get_header_name}}. get_header_name is a helper function. I tried this idea but jade will throw an error. Any ideas how to make it dynamic?
basic.jade
template(name="basicLayout")
#main
header
+header // <--- make this a dynamic using helper (get_header_name)
+search
else
+yield
footer
+footer
If you don't use Iron Router, you can use Template.dynamic.
Define helper that returns session with template name:
Session.set('headerTemplateName', 'defaultHeader');
Template.basicLayout.helpers({
headerTemplate: function() {
return Session.get('headerTemplateName');
}
});
Use that helper in your basicLayout template:
+Template.dynamic template=headerTemplate
Now, when you change value of session headerTemplateName anywhere in the app, your header template will change according to it:
Session.set('headerTemplateName', 'anotherHeader');
If you use Iron Router, check out Layouts and Regions: https://github.com/iron-meteor/iron-router/blob/devel/Guide.md#layouts