Postingan lainnya

apakah aman menampilkan data option di vue.js?

apakah aman menampilkan data option di vue.js? seperti gambar ini :

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

vue laravel

@farisdewantoro

119 Kontribusi 16 Poin

Diperbarui 6 tahun yang lalu

9 Jawaban:

pake api gan

@Jauhary

37 Kontribusi 12 Poin

Dipost 6 tahun yang lalu

Pake vue-resource(<a href='https://github.com/pagekit/vue-resource'>https://github.com/pagekit/vue-resource</a>), terus request data dari server. Contoh :

Client <pre> 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(); } }); </pre> Server <pre> Route::get('product/get-data', function() { return response->json(App\Product::all()); }); </pre>

@human

45 Kontribusi 41 Poin

Dipost 6 tahun yang lalu

untuk requestnya itu apa tidak masalah menggunakan axios? @human

@farisdewantoro

119 Kontribusi 16 Poin

Dipost 6 tahun 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

@farisdewantoro

119 Kontribusi 16 Poin

Dipost 6 tahun yang lalu

Tidak apa pake axios juga kok. Udah di npm install belum? soalnya ada package yang harus di install juga

@human

45 Kontribusi 41 Poin

Dipost 6 tahun 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

@farisdewantoro

119 Kontribusi 16 Poin

Dipost 6 tahun yang lalu

Jawaban Terpilih

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 <pre> <nama-component :product="{{ json_encode($product) }}"></nama-component> </pre> Vue <pre> export default { data() { return { data: {} } }, props: { product: { type: Object, default: null } }, created() { this.data = this.product } } </pre>

Kalau di SPA bisa, dibuat dulu routernya terus bikin path edit-nya Contoh SPA, router.js <pre> import EditProduct from './EditProduct'

export const route = [ { path: 'product/:id/edit', component: EditProduct, name: 'eProduct' } ] </pre> main.js <pre> 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 }) </pre> App.vue <pre> <template> <div> <router-link tag="a" to="{ name='eProduct', params: { id: 1 } }"></router-link>  <router-link tag="a" to="product/1/edit"></router-link> </div> <router-view></router-view> </template> </pre> EditProduct.vue <pre> <template>  <template>

export default {
    data() {
        return {
            data: {}
        }
    },
    created() {
        axios.get(&#039;product/${this.$route.params.id}/edit&#039;)
            .then(data =&amp;gt; {
                this.data = data
            })
            .catch(error =&amp;gt; {
                throw error
            })
    }
}

</script> </pre>

Kurang lebih begitu contohnya, masih ada sih trik yang lebih dinamis dll, tapi kalau harus saya jelasin 1 1...

@human

45 Kontribusi 41 Poin

Dipost 6 tahun yang lalu

SPA itu kepanjangan dari apa yan gan hehehe kalo ada refensi seperti tutorial videonya boleh di share gann hehehe

@farisdewantoro

119 Kontribusi 16 Poin

Dipost 6 tahun yang lalu

Single Page Application, <a href='https://www.youtube.com/watch?v=Jd1RW-0lQOs'>https://www.youtube.com/watch?v=Jd1RW-0lQOs</a>

@human

45 Kontribusi 41 Poin

Dipost 6 tahun yang lalu