Merge pull request #322 from SAP-samples/fix-change-to-vue3
Changes in Vue 3 and stable version
This commit is contained in:
@@ -3,14 +3,14 @@ const $ = sel => document.querySelector(sel)
|
||||
const GET = (url) => axios.get('/browse'+url)
|
||||
const POST = (cmd,data) => axios.post('/browse'+cmd,data)
|
||||
|
||||
const books = new Vue ({
|
||||
const books = Vue.createApp ({
|
||||
|
||||
el:'#app',
|
||||
|
||||
data: {
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
book: undefined,
|
||||
order: { quantity:1, succeeded:'', failed:'' }
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
@@ -42,7 +42,7 @@ const books = new Vue ({
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
}).mount("#app")
|
||||
|
||||
// initially fill list of books
|
||||
books.fetch()
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<title> Capire Books </title>
|
||||
<link rel="stylesheet" href="https://unpkg.com/primitive-ui/dist/css/main.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
|
||||
<style>
|
||||
.hovering tr:hover td { color:cyan; background: #123; cursor: pointer; }
|
||||
.rating-stars { color:teal }
|
||||
@@ -17,7 +17,7 @@
|
||||
<body class="small-container", style="margin-top: 70px;">
|
||||
<div id='app'>
|
||||
|
||||
<h1> {{ document.title }} </h1>
|
||||
<h1> Capire Books </h1>
|
||||
|
||||
<input type="text" placeholder="Search..." @input="search">
|
||||
|
||||
|
||||
@@ -4,21 +4,21 @@ const GET = (url) => axios.get('/reviews'+url)
|
||||
const PUT = (cmd,data) => axios.patch('/reviews'+cmd,data)
|
||||
const POST = (cmd,data) => axios.post('/reviews'+cmd,data)
|
||||
|
||||
const reviews = new Vue ({
|
||||
const reviews = Vue.createApp ({
|
||||
|
||||
el:'#app',
|
||||
|
||||
data: {
|
||||
list: [],
|
||||
review: undefined,
|
||||
message: {},
|
||||
Ratings: Object.entries({
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
review: undefined,
|
||||
message: {},
|
||||
Ratings: Object.entries({
|
||||
5 : '★★★★★',
|
||||
4 : '★★★★',
|
||||
3 : '★★★',
|
||||
2 : '★★',
|
||||
1 : '★',
|
||||
}).reverse()
|
||||
}).reverse()
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
@@ -66,7 +66,7 @@ const reviews = new Vue ({
|
||||
datetime: (d) => d && new Date(d).toLocaleString(),
|
||||
},
|
||||
|
||||
})
|
||||
}).mount("#app")
|
||||
|
||||
// initially fill list of my reviews
|
||||
reviews.fetch()
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<title> Capire Reviews </title>
|
||||
<link rel="stylesheet" href="https://unpkg.com/primitive-ui/dist/css/main.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
|
||||
<style>
|
||||
.hovering tr:hover td { color:cyan; background: #123; cursor: pointer; }
|
||||
.rating-stars { color:teal }
|
||||
@@ -18,7 +18,7 @@
|
||||
<body class="small-container", style="margin-top: 70px;">
|
||||
<div id='app'>
|
||||
|
||||
<h1> {{ document.title }} </h1>
|
||||
<h1> Capire Reviews </h1>
|
||||
|
||||
<input type="text" placeholder="Search..." @input="search">
|
||||
|
||||
|
||||
Reference in New Issue
Block a user