apakah aman menampilkan data option di vue.js?

vue laravel

✔ Forum ini sudah terjawab


foto oleh @farisdewantoro
1 bulan yang lalu
apakah aman menampilkan data option di vue.js? seperti gambar ini : https://i.imgur.com/AbWZqyP.png jadi saya menggunakan framework php yaitu laravel. data itu dikirim melalui laravel yang ada pada database. sebenarnya saya ingin tidak menampilkannya tetapi saya tidak tau bagaimana caranya tolong pencerahannya gan
Jawaban
foto oleh @human
1 bulan yang lalu
Kalau pake Vue + webpack untuk bukan yang SPA, si data-nya di masukin lewat props. Kalau SPA ada juga caranya tapi susah juga kalau dijelasin cuma lewat tulisan. Contoh yang bukan SPA, di file blade-nya
<nama-component :product="{{ json_encode($product) }}"></nama-component>
Vue
export default {
    data() {
        return {
            data: {}
        }
    },
    props: {
        product: {
            type: Object,
            default: null
        }
    },
    created() {
        this.data = this.product
    }
}
Kalau di SPA bisa, dibuat dulu routernya terus bikin path edit-nya Contoh SPA, router.js
import EditProduct from './EditProduct'

export const route = [
    {
        path: 'product/:id/edit',
        component: EditProduct,
        name: 'eProduct'
    }
]
main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import { route } from './router.js'
import App from './App'

const router = new VueRouter({
    route
})

new Vue({
    el: '#app',
    render: h => h(App),
    router
})
App.vue
<template>
    <div>
        <router-link tag="a" to="{ name='eProduct', params: { id: 1 } }"></router-link>
        <!-- Atau begini juga bisa -->
        <router-link tag="a" to="product/1/edit"></router-link>
    </div>
    <router-view></router-view>
</template>
EditProduct.vue
<template>
    <!-- Disini form edit -->
<template>

<script>
    import axios from 'axios'

    export default {
        data() {
            return {
                data: {}
            }
        },
        created() {
            axios.get('product/${this.$route.params.id}/edit')
                .then(data => {
                    this.data = data
                })
                .catch(error => {
                    throw error
                })
        }
    }
</script>
Kurang lebih begitu contohnya, masih ada sih trik yang lebih dinamis dll, tapi kalau harus saya jelasin 1 1...
answered icon
foto oleh @Jauhary
1 bulan yang lalu
pake api gan
foto oleh @human
1 bulan yang lalu
Pake vue-resource(https://github.com/pagekit/vue-resource), terus request data dari server. Contoh : Client
new Vue({
    el: '#product_show_app',
    data: {
        product: []
    },
    method: {
        getData() {
            this.$http.get('http://localhost/product/get-data', function (data) {
                this.product = data;
            }).error(function (data, status, request) {
                // error
            })
        }
    },
    created: function() {
        this.getData();
    }
});
Server
Route::get('product/get-data', function() {
    return response->json(App\Product::all());
});
foto oleh @farisdewantoro
1 bulan yang lalu
untuk requestnya itu apa tidak masalah menggunakan axios? @human
foto oleh @farisdewantoro
1 bulan yang lalu
gann untuk menggunakan vue.js itu harus menggunakan npm install dan sebagainya ?karena saya sering kali gagal menggunakan npm tidak tau kenapa ketika menggunakan npm run dev atau npm run watch pasti error seperti ini : @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=no de_modules/laravel-mix/setup/webpack.config.js`
foto oleh @human
1 bulan yang lalu
Tidak apa pake axios juga kok. Udah di npm install belum? soalnya ada package yang harus di install juga
foto oleh @farisdewantoro
1 bulan yang lalu
sudah jalan gan cuman untuk melakukan misalnya ingin mengedit sebuah product membutuhkan 1 buah parameter contoh www.test/product/1/edit nahhh bagaimana cara mengpassing parameter 1 itu ke dalam axios yang berada pada vue component? @human
foto oleh @human
1 bulan yang lalu
Kalau pake Vue + webpack untuk bukan yang SPA, si data-nya di masukin lewat props. Kalau SPA ada juga caranya tapi susah juga kalau dijelasin cuma lewat tulisan. Contoh yang bukan SPA, di file blade-nya
<nama-component :product="{{ json_encode($product) }}"></nama-component>
Vue
export default {
    data() {
        return {
            data: {}
        }
    },
    props: {
        product: {
            type: Object,
            default: null
        }
    },
    created() {
        this.data = this.product
    }
}
Kalau di SPA bisa, dibuat dulu routernya terus bikin path edit-nya Contoh SPA, router.js
import EditProduct from './EditProduct'

export const route = [
    {
        path: 'product/:id/edit',
        component: EditProduct,
        name: 'eProduct'
    }
]
main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import { route } from './router.js'
import App from './App'

const router = new VueRouter({
    route
})

new Vue({
    el: '#app',
    render: h => h(App),
    router
})
App.vue
<template>
    <div>
        <router-link tag="a" to="{ name='eProduct', params: { id: 1 } }"></router-link>
        <!-- Atau begini juga bisa -->
        <router-link tag="a" to="product/1/edit"></router-link>
    </div>
    <router-view></router-view>
</template>
EditProduct.vue
<template>
    <!-- Disini form edit -->
<template>

<script>
    import axios from 'axios'

    export default {
        data() {
            return {
                data: {}
            }
        },
        created() {
            axios.get('product/${this.$route.params.id}/edit')
                .then(data => {
                    this.data = data
                })
                .catch(error => {
                    throw error
                })
        }
    }
</script>
Kurang lebih begitu contohnya, masih ada sih trik yang lebih dinamis dll, tapi kalau harus saya jelasin 1 1...
foto oleh @farisdewantoro
1 bulan yang lalu
SPA itu kepanjangan dari apa yan gan hehehe kalo ada refensi seperti tutorial videonya boleh di share gann hehehe

Login untuk diksusi di forum sekolah koding