[英]How to Convert Codepen to Vue.js?
我無法將這支筆移動到 Vue.js
這就是我的 Vue 應用程序代碼的樣子——我知道 HTML 和 CSS 應該放在哪里。 我應該將 Javascript 添加到單個組件中,還是將其添加到 App.vue 文件中?
我想要做的是在我可以路由到的視圖中測試這段代碼。
這是來自筆的Javascript:
var app = new Vue({
el: '#app',
mounted() {
let vm = this
axios
.get(
'https://sheets.googleapis.com/v4/spreadsheets/15qFEW97T-9Im9dx5G4KJqRorPDy74wwAvqaQm5Phz4w/values/A2%3AC12?key=AIzaSyBP4OwJmDCdX0rdOdgIa4q79g0XrMGcOSk'
)
.then(function (response) {
let specials = response.data.values
for (let index = 0; index < specials.length; index++) {
const element = specials[index]
let mitem = {
name: element[0],
description: element[1],
price: element[2]
}
if (vm.isEven(index)) {
vm.menuItems_L = vm.menuItems_L.concat(mitem)
} else {
vm.menuItems_R = vm.menuItems_R.concat(mitem)
}
}
console.log(response)
})
},
data: {
menuItems_L: [],
menuItems_R: [],
menuStyle: {
background: '#ffe6d1',
color: '#000'
},
dotStyle: {
backgroundImage: 'radial-gradient(' + this.color + ' 1px, transparent 0px)'
}
},
computed: {},
methods: {
isEven: function (n) {
return n % 2 == 0
}
}
});
這就是我的代碼在組件中的樣子(隨着研究/猜測的變化),HTML 在它上面的標簽中:
<script>
import axios from 'axios';
export default {
mounted() {
let vm = this
Vue.axios.get(
'https://sheets.googleapis.com/v4/spreadsheets/15qFEW97T-9Im9dx5G4KJqRorPDy74wwAvqaQm5Phz4w/values/A2%3AC12?key=AIzaSyBP4OwJmDCdX0rdOdgIa4q79g0XrMGcOSk'
)
.then(function (response) {
let specials = response.data.values
for (let index = 0; index < specials.length; index++) {
const element = specials[index]
let mitem = {
name: element[0],
description: element[1],
price: element[2]
}
if (vm.isEven(index)) {
vm.menuItems_L = vm.menuItems_L.concat(mitem)
} else {
vm.menuItems_R = vm.menuItems_R.concat(mitem)
}
}
console.log(response)
})
},
data: {
menuItems_L: [],
menuItems_R: [],
menuStyle: {
background: '#ffe6d1',
color: '#000'
},
dotStyle: {
backgroundImage: 'radial-gradient(#000, 1px, transparent 0px)'
}
},
computed: {},
methods: {
isEven: function (n) {
return n % 2 == 0
},
setColor: function (c) {
c = menuStyle.color
let colorStyle = 'radial-gradient(' + c + ' 1px, transparent 0px)'
return colorStyle
}
}
}
</script>
您只需要刪除第一個 HTML 模板上的鏈接,並使<div id='#app'>
成為整個頁面的根目錄,如 [Vue Docs] 1中所述
Vue 會顯示一個錯誤,說明每個組件都必須有一個根元素。 您可以通過將模板包裝在父元素中來修復此錯誤
還將data:{}
更改為 function data(){return{}}
...因為正如Vue Docs所述,該 Data 必須是一個函數
組件的 data 選項必須是一個函數,以便每個實例都可以維護返回的數據對象的獨立副本:
import axios from 'axios';
export default {
el: '#app',
data() {
return {
menuItems_L: [],
menuItems_R: [],
menuStyle: {
background: '#ffe6d1',
color: '#000'
},
dotStyle: {
backgroundImage: 'radial-gradient(' + this.color + ' 1px, transparent 0px)'
}
}
},
mounted() {
let vm = this
axios
.get(
'https://sheets.googleapis.com/v4/spreadsheets/15qFEW97T-9Im9dx5G4KJqRorPDy74wwAvqaQm5Phz4w/values/A2%3AC12?key=AIzaSyBP4OwJmDCdX0rdOdgIa4q79g0XrMGcOSk'
)
.then(function (response) {
let specials = response.data.values
for (let index = 0; index < specials.length; index++) {
const element = specials[index]
let mitem = {
name: element[0],
description: element[1],
price: element[2]
}
if (vm.isEven(index)) {
vm.menuItems_L = vm.menuItems_L.concat(mitem)
} else {
vm.menuItems_R = vm.menuItems_R.concat(mitem)
}
}
console.log(response)
})
},
methods: {
isEven: function (n) {
return n % 2 == 0
}
}
}
<template>
<div id="app">
<section id="specialssection" class="specials-container" v-if="menuItems_L" :style="menuStyle">
<div id="special_component" :style="menuStyle">
<h1>Daily Specials</h1>
<div class="specials-table-container">
<table>
<tbody v-for="item in menuItems_L" :key="`specialmenu-${item.name}`">
<tr class="nameandprice">
<td :style="dotStyle">
<span :style="menuStyle">{{item.name}}</span>
</td>
<td :style="dotStyle">
<span :style="menuStyle">${{item.price}}</span>
</td>
</tr>
<tr class="description">
<td colspan="2">{{item.description}}</td>
</tr>
</tbody>
</table>
<table>
<tbody v-for="item in menuItems_R" :key="`specialmenu-${item.name}`">
<tr class="nameandprice">
<td :style="dotStyle">
<span :style="menuStyle">{{item.name}}</span>
</td>
<td :style="dotStyle">
<span :style="menuStyle">${{item.price}}</span>
</td>
</tr>
<tr class="description">
<td colspan="2">{{item.description}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</div>
</template>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.