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

Discover the secret to incorporating concealed text in WordPress with a hidden div through the power of JavaScript

How exactly does this JavaScript code determine the index of the maximum value within an array?

Error: The createContext function is designed for use only in Client Components. To enable it, include the "use client" directive at the beginning of the file

When iterating over objects in JavaScript, the loop may return undefined, while using Lodash's map

Steps for implementing a JavaScript script to modify all values within a table

React: Incorporating .map for nested arrays. Ensure each child component within the list is assigned a distinct "key" property

Having difficulty choosing an item from a personalized autocomplete search bar in my Vue.js/Vuetify.js project

Issue with .env file access token: Successfully working for one API in Next.js, but failing for

The jssor slider cannot be initialized when it is loaded through ajax requests

utilizing the setState function to insert an object into a deeply nested array

Using javascript to store HTML tags in a variable

What exactly is the significance of placing a term "in" within a method's parameter list in documentation?

JQuery is having trouble locating a variable in a different JavaScript file

What strategies can be employed to mitigate the activation of the losing arm in a Promise.race?

I keep receiving multiple header errors from ExpressJS even though I am positive that I am only sending a single header

What is the reason for this JavaScript code not activating the input field (aspx)?

Utilize focusout and onclick events on multiple components at the same time

A guide to using select2.js to activate a selection based on a data attribute

Find the position of an HTML5 canvas element within a webpage

Why aren't my Post Variables being passed through my jQuery Ajax Request?