CODEWITHSUNDEEP
javascriptvue.jsvuejs2
SumNeuron
SumNeuron

Reputation: 5198

Vue2 passing arbitrary named variable as prop

I am new to Vue and after checking the docs I can not figure out how to achieve the following:

From my understanding, props are meant to be a way to allow data to be passed to a component and as it states on the website:

Passing Data to Child Components with Props: Props are custom attributes you can register on a component. When a value is passed to a prop attribute, it becomes a property on that component instance.

Since props can be required, it would seem that we can design components under the assumption that some data would be there, and possible within certain parameters (if the validator option is specified).

So I would like to define a function or object outside of vue, e.g. in an application, and pass this function or object to my vue instance.

This works if my named object of function has the exact same name as the prop to which I attempt to bind it. However, as I might have multiple instances of the Vue component and I might want to bind different data, I find using the same name for the variable less than ideal.

Now if I do as the Vue warning suggests, and name object / function the same as the prop, then the warning switches to that my data is not defined inside vue and to make sure it is reactive by reading: https://v2.vuejs.org/v2/guide/components-props.html

which, to be honest, doesnt really explain how to solve the issue,

or move the prop to the data level.

Which I can do (still gives the same warning), but kind of defeats the purpose of having props with my understanding of Vue.

This become more frustrating with anonymous vue instances.

e.g.

<script>
export default {
  props: {
    // records: {
    //   default: function(){return{}},
    //   type: Object
    // }
  },
  data: function() {
    return {
      records: {} // define even an empty value in data for it to be 'reactive'
    }
  },
  computed: {
    fields: function() {

    },
    keys: function() {
      return Object.keys(this.records)
    }
  },
  methods: {

  }
}
</script>

trying to use this as a component and set records to var myRecords = {"a": {}} fails:

<my-comp :records="myRecords"/>

So how exactly should I circumvent this? Where should I define my data then? and how should I handle the naming in the case of multiple instances?

A more fledged on example is found on a similar question:

Vue2: passing function as prop triggers warning that prop is already set

Upvotes: 0

Views: 1668

Answers (1)

Decade Moon
Decade Moon

Reputation: 34306

So I would like to define a function or object outside of vue, e.g. in an application, and pass this function or object to my vue instance.

It's hard to give a definitive answer because I don't know the specifics of how you have organized your code. Are you using Webpack? Single file components (.vue)? If yes to any of these, then you needn't use global variables in the way you have described in your question.

Your entire Vue app should consist of a single root Vue instance (which you instantiate with new Vue(...), and from there each component is rendered within the root component's template, and templates of those components, and so on.

Looking at the following template:

<my-comp :records="myRecords"/>

myRecords must be a property on the Vue component instance whose template contains the above. It could be declared within the data block, or as a computed property, or a prop, it doesn't matter.

Here's a small example:

<div id="app">
  <my-comp :records="myRecords"></my-comp>
</div>

// Obtain records in some way and store it in a global variable
var records = ...

// This is the root Vue instance
new Vue({
  el: '#app',
  data: {
    // You must store the records array in the Vue component like this
    // for it to be referenced within the template.
    // You can optionally transform the data first if you want.
    myRecords: records.filter(r => r.name.startsWith('Bob'))
    // ^        ^
    // |        |
    // |        +--- the global variable
    // |
    // +---- the name of the property on the component instance
  }
})

Note that MyComp component does not access the records global variable in any way, it only takes its input through the records prop.

Upvotes: 1

Related Questions