Как конвертировать Codepen в Vue.js?

Question

У меня проблемы с перемещением этой ручки в 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>

Answer 1

Вам просто нужно удалить ссылку на первый из HTML-шаблонов и сделать <div id='#app'> корнем для всей страницы, как указано в Vue Docs

Vue выдаст ошибку, объясняющую, что у каждого компонента должен быть один корневой элемент.Вы можете исправить эту ошибку, поместив шаблон в родительский элемент

Также измените data:{} на функцию data(){return{}} ..., поскольку, как уже упоминалось в Vue Docs , эти данныедолжна быть функцией

параметр данных компонента должен быть функцией, чтобы каждый экземпляр мог поддерживать независимую копию возвращенного объекта данных:

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>