web-dev-qa-db-fra.com

Passer l'objet en tant que prop Vue

Comment continuez-vous à passer des objets comme accessoires lors d'une vue? J'imagine que ce serait une tâche simple mais apparemment pas.

J'ai le code suivant sur un fichier .vue:

`

<template>
    <div id="scatter"></div>
</template>

<script>
    export default {
       props: {
           data: {
                type: Object,
           default: () => ({})
       }
     },
     mounted () { 
         console.log(this.data)
     }
    }
</script>

`

Sur html, j'essaie de transmettre les accessoires data comme suit:

<component :data="{x:1}"></component>

Lorsque j'essaie de le connecter à la console, le résultat n'est qu'un objet observateur vide.

javascriptvue.js
27
Diego Gallegos

Je crois que le problème se situe ailleurs dans votre code, car le fait de passer un objet comme accessoire est aussi simple que vous l'imaginez:

// register the component
Vue.component('component', {
  props: {
    data: {
        type: Object
    }
  },
  template: '<div>Data: {{data}}</div>',
  mounted: function () {
    console.log(this.data)
  }
})

new Vue({
  el: '#example'
})

HTML:

<div id="example">
  <component :data="{x:1}"></component>
</div>

Voici un violon le montrant en action: https://jsfiddle.net/tk9omyae/

18
Jamie Curnow

Edit: Après ma réponse initiale et la création d’un JsFiddle, je ne sais pas pourquoi le comportement que vous avez décrit se produit. Cela fonctionne lorsqu'il est réduit au cas d'utilisation:

<script>
    export default {
       props: {
           ok: {
               type: Object,
               default: () => ({}),
           },
           data: {
               type: Object,
               default: () => ({})
           }
       }
     },
     mounted () { 
         console.log(this.data) // {x:1}
         console.log(this.ok) // {x:1}
     }
    }
</script>

Et le HTML:

<component :ok="{x:1}" :data="{x:1}"></component>

Voici un JsFiddle qui illustre le comportement: https://jsfiddle.net/mqkpocjh/

2
exclsr
v-bind="yourObject"

Devrait faire le <my-component v-bind="yourObject"><my-component>

Pas sûr de <component></component>. Toujours en train de creuser dans Vue. Essayez de nous le faire savoir.

1
kushalvm