Utilizing Props in Vue.js to Access Data for v-model

Question

Utilizing Props in Vue.js to Access Data for v-model

After browsing online, I attempted to pass props to data in the following manner:

Child Component:

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

This allows me to utilize 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 issue arises when "name" appears as undefined. However, if I alter it to "nameInput", it functions properly but triggers a Vue error warning against using props that way. Any suggestions?

javascript vue.js

Answer 1

Answer №1

Below is a practical demonstration I put together to illustrate this scenario:

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

new Vue({
  el: "#myApplication",
  data () {
    return {
      game: {}
    }
  },
  created() {
    this.game = { name: 'selectedName', id: 'chosenID' };
  },
  components: { component }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="myApplication">
  <component :name-input="game.name" :id-input="game.id" />
  {{game}}
</div>

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

UPDATE: Upon reviewing the code, it appears that the issue lies in setting the game attribute in the data of the parent component during beforeCreated. Adjust it to be set during created instead.

REVISED The original poster discovered an alternative approach. Rather than passing individual props, pass a single prop containing the object and utilize its attributes with v-model.

Answer 2

Below is a practical demonstration I put together to illustrate this scenario:

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

new Vue({
  el: "#myApplication",
  data () {
    return {
      game: {}
    }
  },
  created() {
    this.game = { name: 'selectedName', id: 'chosenID' };
  },
  components: { component }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="myApplication">
  <component :name-input="game.name" :id-input="game.id" />
  {{game}}
</div>

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

UPDATE: Upon reviewing the code, it appears that the issue lies in setting the game attribute in the data of the parent component during beforeCreated. Adjust it to be set during created instead.

REVISED The original poster discovered an alternative approach. Rather than passing individual props, pass a single prop containing the object and utilize its attributes with v-model.

Utilizing Props in Vue.js to Access Data for v-model

Answer №1

Similar questions

Is the term "filter" considered a reserved keyword in Angular, Javascript, or ASP.Net MVC?

I am looking for a way to retrieve the ids of all div elements that have the same x coordinate using document.elementFromPoint in JavaScript. Can someone help me with

Avoid clicking in areas outside the perimeter of the blue circle in the SVG

Creating a polyBezier or polyCurve with Canvas HTML: a step-by-step guide

Tips for sending a JavaScript object from PHP to AJAX

Using headers in the fetch api results in a 405 Method Not Allowed error

What is the process for reaching application-level middleware from the router?

Trying out a newly added function in a Vue.js/Nuxt.js component to test its dynamic capabilities

What is the best way to display an image in Vuetify when the URL is found within my filtered array?

What are some strategies for optimizing the loading speed of Nuxt.js when using cloud functions?

Implement a contact form using backend functionality in a ReactJS application

Modifying static content within jQuery tabs

There seems to be a hiccup in the distribution build of Angular grunt, as it is unable to locate the

How can I preserve the line break in a textarea using PHP?

How are objects typically created in Node.js applications?

The accuracy of getBoundingClientRect in calculating the width of table cells (td)

Error encountered while handling document events during server-side rendering in ReactJS

When the button is clicked, bind the value to an object using the specified key in

Autocomplete feature in Material-UI does not trigger the onChange event when a chip

Is there a way to selectively display items that are grouped with children only?