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

user_10715479 0
Viewed 2315

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?

vue.js javascript
1 Answers

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.

user_74863130
Related