Skip to content

Instantly share code, notes, and snippets.

@typenoob
Last active February 28, 2022 15:26
Show Gist options
  • Save typenoob/454cec6a163349c491890089e4756406 to your computer and use it in GitHub Desktop.
Save typenoob/454cec6a163349c491890089e4756406 to your computer and use it in GitHub Desktop.
记录一个神奇的vue3 bug?
<template>
<h1>这是第{{ current }}页</h1>
<MovieCard
:id="movies.movies[current]"
:title="movies.movies[current]"
imgurl="https://images.weserv.nl/?url=https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2848324437.webp"
/>
<div>
<a-pagination
v-model:current="current"
show-quick-jumper
:total="500"
@change="onChange"
/>
<br />
</div>
</template>
<script>
import axios from "axios";
import { defineComponent, ref } from "vue";
import MovieCard from "./MovieCard";
export default defineComponent({
setup() {
const current = ref(1);
const onChange = (pageNumber) => {
console.log("Page: ", pageNumber);
};
return {
current,
onChange,
};
},
data() {
return {
movies: [],
};
},
mounted() {
axios
.get("https://raw.githubusercontent.com/typenoob/iolix/master/db.json")
.then((response) => {
this.movies = response.data.database;
})
.catch(function (error) {
console.log(error);
});
},
components: {
MovieCard,
},
methods: {
findLabel: function (id) {
console.log(this.database.movies);
for (var movie of this.database.movies) {
if (id == movie.id) {
return movie;
}
}
},
},
});
</script>
<template>
<h1>这是第{{ current }}页</h1>
<MovieCard
:id="movies[current]"
:title="movies[current]"
imgurl="https://images.weserv.nl/?url=https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2848324437.webp"
/>
<div>
<a-pagination
v-model:current="current"
show-quick-jumper
:total="500"
@change="onChange"
/>
<br />
</div>
</template>
<script>
import axios from "axios";
import { defineComponent, ref } from "vue";
import MovieCard from "./MovieCard";
export default defineComponent({
setup() {
const current = ref(1);
const onChange = (pageNumber) => {
console.log("Page: ", pageNumber);
};
return {
current,
onChange,
};
},
data() {
return {
movies: [],
};
},
mounted() {
axios
.get("https://raw.githubusercontent.com/typenoob/iolix/master/db.json")
.then((response) => {
this.movies = response.data.database.movies;
})
.catch(function (error) {
console.log(error);
});
},
components: {
MovieCard,
},
methods: {
findLabel: function (id) {
console.log(this.database.movies);
for (var movie of this.database.movies) {
if (id == movie.id) {
return movie;
}
}
},
},
});
</script>
@typenoob
Copy link
Author

image
报错信息

@typenoob
Copy link
Author

找到问题所在了,如[https://segmentfault.com/q/1010000009396332]所述

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment