CODEWITHSUNDEEP
javascriptvue.js
David Díaz
David Díaz

Reputation: 119

Vue.js: Passing props to data to use in v-model

I've been trying to pass props to data like this, as I saw on another post:

Child Component:

props: {
  idInput:   { type: String, required: false },
  nameInput: { type: String, required: false },
},
data() {
  return {
    id: this.idInput,
    name: this.nameInput,
  }
}

So I can use it here:

<t-input v-model="name" type="text" />

Parent Component:

data() { return { game: {} } },
beforeCreated() { this.game = { name: "myName", id: "myID" }

<ChildComponent :name-input="game.name" :id-input="game.id" />

The problem is that "name" appears to be undefined, while if I do the same but changing "name" to "nameInput" it works, but I get the Vue error telling me not to use props like that. Any ideas?

Upvotes: 2

Views: 4120

Answers (1)

Majed Badawi
Majed Badawi

Reputation: 28404

Here is a functional example I created to demonstrate this case:

const comp = Vue.component('comp', { 
  template: '#myComp',
  props: {
    idInput:   { type: String, required: false },
    nameInput: { type: String, required: false },
  },
  data() {
    return {
      id: this.idInput,
      name: this.nameInput,
    }
  }
});

new Vue({
  el: "#myApp",
  data () {
    return {
      game: {}
    }
  },
  created() {
    this.game = { name: 'myName', id: 'myID' };
  },
  components: { comp }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="myApp">
  <comp :name-input="game.name" :id-input="game.id" />
  {{game}}
</div>

<template id="myComp">
  <div>
    {{idInput}}
    <br>
    <input v-model="name" type="text" />
  </div>
</template>

EDIT: After checking the code, I think the problem is that you're setting the game atrribute in the data of the parent component on beforeCreated. Set it on created instead.

EDIT OP found another way to do it. Instead of passing props one by one, pass just 1 prop with the object and use its attributes on the v-model.

Upvotes: 4

Related Questions