import ListCard from "../components/ListCard.vue"
import Cooker from "../components/Cooker.vue"
const routers = [
{
path: "/",
redirect: "/list",
},
{
path: "/list",
name: "",
component: ListCard
},
{
path: "/grasp",
name: "grasp",
component: Cooker
}
] as shown in the figure, this way, it is impossible to achieve Synchronize data and interface at all.
v-for never refreshes the interface. Although listss has changed.
{{listss}}
<div v-for="(pp, index) in listss" :key="index" class="sonbi" @dblclick="showDetail(pp)">
<h2 class="ttl">
{{pp.name}}
</h2>
</div>you can"t write it this way:
const routers = [
{
path: "/",
redirect: "/list",
},
{
path: "/list",
name: "",
component: () => import("@/components/ListCard.vue")
},
{
path: "/grasp",
name: "grasp",
component: () => import("@/components/Cooker.vue")
}
]
export default routerspackage.json.
initialized with vue-cli{
"name": "generation-frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"vue": "^2.5.17"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.2.0",
"@vue/cli-plugin-eslint": "^3.2.0",
"@vue/cli-service": "^3.2.0",
"axios": "^0.18.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.8.0",
"eslint-plugin-vue": "^5.0.0-0",
"iview": "^3.1.5",
"query-string": "^6.2.0",
"vue-router": "^3.0.2",
"vue-template-compiler": "^2.5.17"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}