I am trying to control the accordion expand or collapse but I cant use guide from docs it come out with below image error >>> IonicFrameWork Doc I am using same code with the guide.
const accordionGroup = ref(null);
const toggleAccordion = () => {
if (!accordionGroup.value) {
return;
}
const nativeEl = accordionGroup.value.$el;
if (nativeEl.value === 'second') {
nativeEl.value = undefined;
} else {
nativeEl.value = 'second';
}
};
//html
<ion-accordion-group ref="accordionGroup" :value="['first']">
<ion-accordion value="first">
<ion-item slot="header" color="secondary">
<ion-label>Click here select shop type</ion-label>
</ion-item>
<div slot="content">
Hello World
</div>
</ion-accordion>
</ion-accordion-group>
Related
Hi I'm currently learning Vue but I've noticed that for some reason all my sites have the wrong size, as if the default mode was center and small, I haven't touched any setting that I'm aware of, see pics for examples, notice the huge viewport compared to the info that is shown:
This one is almost right, apparently got the heighht right but the width wrong, I have no idea why
This one is at the center for some reason
This one is the worst, look at how tiny it is, like what the hell
Any help would be appreicated, thanks!
I've tried tinkering a bit with CSS margins, height, widht, ect., but nothing really works, it only gets worse
I'll provide a code example of the second case, the simplest one:
<script setup>
import { ref, computed } from 'vue';
const name = 'Vue Dinámico';
const counter = ref(0);
const colorRed = "color: red";
const colorGreen = "color: green";
const increment = () => {
counter.value++;
};
const decrement = () => {
counter.value--;
};
const reset = () => {
counter.value = 0;
};
const classCounter = computed(() => {
if(counter.value === 0){
return 'zero';
}
if(counter.value > 0) {
return 'positive';
}
if(counter.value < 0){
return 'negative';
}
});
const arrayNum = ref([]);
const addNum = () => {
arrayNum.value.push(counter.value);
};
const bloquearBtnAdd = computed(() => {
const numSearch = arrayNum.value.find(num => num === counter.value);
console.log(numSearch);
//if(numSearch === 0) return true;
//return numSearch ? true : false;
return numSearch || numSearch === 0;
})
</script>
<template>
<div class="container text-center mt-3">
<h1>Hola {{ name.toUpperCase() }}</h1>
<h2 :class="classCounter">{{ counter }}</h2>
<div class="btn-group">
<button #click="increment" class="btn btn-success">Aumentar</button>
<button #click="decrement" class="btn btn-danger">Disminuir</button>
<button #click="reset" class="btn btn-sceondary">Reset</button>
<button #click="addNum" :disabled="bloquearBtnAdd" class="btn btn-primary">Agregar</button>
</div>
<ul class="list-group mt-4">
<li
class="list-group-item"
v-for="(num, index) in arrayNum"
:key="index">
{{num}}
</li>
</ul>
</div>
</template>
<style>
h1 {
color: red;
}
.positive {
color: green;
}
.negative {
color: red;
}
.zero {
color: peru;
}
</style>
Has anyone used AntDesign ever encountered the problem with Ant's pagination component? I call api with limit of 7 and total is 15 records, antD should return all 3 pages but it only calculates and outputs 2 pages? It doesn't seem to use the Math.celi function for calculations
Here are some related code snippets:
In View:
<!-- Pagination -->
<span class="flex col-span-4 mt-2 sm:mt-auto sm:justify-end">
<nav aria-label="Table navigation">
<ul class="inline-flex items-center">
<a-pagination
v-if="!loading"
#change="pagination"
v-model:current="current"
:total="totalPage"
show-less-items
/>
</ul>
</nav>
</span>
In Script:
<script setup lang="ts">
import Pagination from "#/components/Pagination.vue";
const totalPage = ref<number>();
const current = ref(1);
async function getFile(page = 1) {
try {
const fileData = await request.get("api/admin/file/list", {
params: {
page,
limit: 7,
name: searchName.value.trim(),
status: stateStatus.value,
mimetype: typeFile.value,
lte_size: endSize.value,
gte_size: startSize.value,
},
});
files.value = fileData.data.data;
totalPage.value = fileData.data.count;
console.log("Total Page:",totalPage.value) //Log the correct results
loading.value = false;
} catch (e) {
console.log(e);
}
}
onMounted(async () => {
await getFile();
});
//Tính phân trang
async function pagination(pageNumber: number) {
current.value = pageNumber;
files.value = [];
await getFile(pageNumber);
}
</script>
Hope to get help from everyone, thanks a lot
Hello I am a beginner in JavaScript and Vue.js but trying to make some apps to understand how it works.
I am following this article to create a sample application.
https://morioh.com/p/39a413935071
I could fetch data from the API yet there are some errors in the console in the next step.
Here is my code and my console error.
Could you please explain why I get this error and how to fix it?
Index.html
<div class="container" id="app">
<h3 class="text-center">VueNews</h3>
<div class="row" v-for="posts in processedPosts">
<div class="columns large-3 medium-6" v-for="post in posts">
<div class="card">
<div class="card-divider">
{{ post.title }}
</div>
<a :href="post.url" target="_blank"><img :src="post.image_url"></a>
<div class="card-section">
<p>{{ post.abstract }}</p>
</div>
</div>
</div>
</div>
</div>
main.js
const NYTBaseURL = 'https://api.nytimes.com/svc/topstories/v2/';
const ApiKey = 'MyApiKey';
function buildUrl(url) {
return NYTBaseURL + url + '.json?api-key=' + ApiKey
}
const app = new Vue({
el: '#app',
data: {
results: []
},
mounted() {
this.getPosts('home')
},
methods: {
getPosts(section) {
let url = buildUrl(section)
axios.get(url).then((response) => {
this.results = response.data.results
}).catch(error => {
console.log(error)
})
}
},
computed: {
processedPosts() {
let posts = this.results
// Add image_url_attribute
posts.map(post => {
let imgObj = post.multimedia.find(media => media.format === 'superJumbo')
post.image_url = imgObj ? imgObj.url: 'http://placehold.it/300x200?text=N/A'
})
// Put Array into Chunks
let i, j, chunkedArray = [], chunk = 4
for (i = 0, j = 0; i< posts.length; i += chunk, j++) {
chunkedArray[j] = posts.slice(i, i+chunk)
}
return chunkedArray
}
}
})
Console
The problem is not all posts have a multimedia array. Some have multimedia: null, and null doesn't have a find method. Only arrays (and other iterables) do.
In short, you might want to replace
let imgObj = post.multimedia.find(media => media.format === 'superJumbo')
with
let imgObj = (post.multimedia || [])
.find(media => media.format === 'superJumbo')
If post.multimedia is null, it will search in an empty array, which has a .find method, so your app doesn't break.
I can't use the Swiper slideNext function in VueJS with Ionic.
I tried the demo codes from the official Swiper website, without success...
Here is my code:
<template>
<ion-page>
...
<ion-row class="mainRow">
<ion-col size="12">
<ion-row>
<div class="swiper">
<div
class="swiper-slide"
v-for="(question, index) in qst"
:key="`question_${index}`"
>
...
</ion-page>
</template>
<script>
setup() {
const swiperRef = ref(null);
const [slideSpace, setSlideSpace] = useState(0);
const swiper = new Swiper(".swiper", {
speed: 400,
slidesPerView: 1,
spaceBetween: slideSpace,
controller: {
control: swiperRef,
},
on: {
slideChange: function (e) {
setCurrentQuestion(e.activeIndex + 1);
},
},
});
const handleAnswerClick = (event, answer, question) => {
...
setTimeout(() => {
isCorrect && setScore((score) => score + 1);
event.target.setAttribute("color", "light");
swiper.slideNext(); // this line is problematic
checkIfComplete();
}, 1000);
};
The error :
it comes from the Swiper module
I have a website which is based on an old version of ngx-admin (Nebular) which i am assuming version 2.1.0.
the new nebular documentation does not seem to apply to my website, so i am trying to add an infinite loop functionality using ngx-infinite-scroll, but the scroll event is not fired.
my example which i try to apply is taken from (https://stackblitz.com/edit/ngx-infinite-scroll?file=src%2Fapp%2Fapp.module.ts)
my component:
//our root app component
import { Component } from "#angular/core";
#Component({
selector: "my-app",
styleUrls: ["./test.component.scss"],
templateUrl: "./test.component.html"
})
export class TestComponent {
array = [];
sum = 100;
throttle = 300;
scrollDistance = 1;
scrollUpDistance = 2;
direction = "";
modalOpen = false;
constructor() {
console.log("constructor!!");
this.appendItems(0, this.sum);
}
addItems(startIndex, endIndex, _method) {
for (let i = 0; i < this.sum; ++i) {
this.array[_method]([i, " ", this.generateWord()].join(""));
}
}
appendItems(startIndex, endIndex) {
this.addItems(startIndex, endIndex, "push");
}
prependItems(startIndex, endIndex) {
this.addItems(startIndex, endIndex, "unshift");
}
onScrollDown(ev) {
console.log("scrolled down!!", ev);
// add another 20 items
const start = this.sum;
this.sum += 20;
this.appendItems(start, this.sum);
this.direction = "down";
}
onUp(ev) {
console.log("scrolled up!", ev);
const start = this.sum;
this.sum += 20;
this.prependItems(start, this.sum);
this.direction = "up";
}
generateWord() {
return "Test Word";
}
toggleModal() {
this.modalOpen = !this.modalOpen;
}
}
my html:
<h1 class="title well">
ngx-infinite-scroll v-{{nisVersion}}
<section>
<small>items: {{sum}}, now triggering scroll: {{direction}}</small>
</section>
<section>
<button class="btn btn-info">Open Infinite Scroll in Modal</button>
</section>
</h1>
<div class="search-results"
infinite-scroll
[infiniteScrollDistance]="scrollDistance"
[infiniteScrollUpDistance]="scrollUpDistance"
[infiniteScrollThrottle]="throttle"
(scrolled)="onScrollDown()"
(scrolledUp)="onUp()" style="height:100%">
<p *ngFor="let i of array">
{{ i }}
</p>
</div>
Any hints how i can get the scroll event to fire?
Well, finally i got it.
the tricky part of ngx-admin was to findout that one needs to add withScroll="false" to nb-layout in the theme file.
then in the component file this is what worked for me:
#HostListener("window:scroll", ["$event"])
onWindowScroll() {
//In chrome and some browser scroll is given to body tag
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
console.log("scrolled");
}
}
How to detect scroll to bottom of html element
maybe this will help someone