Desde mi componente principal, hago algo como esto:
<example myID="abcd1234" label="Something important" /> <example myID="87poi" label="Just a label" /> <example myID="zxcvb" label="Extremely important" /> <example myID="bcd" label="No importance at all" />Y el siguiente es mi componente hijo:
<template> <div> <label :id="[myID]">{{ label }}</label> <input :id="[myID]" type="text" v-on:focusout="handleFocusOut"/> <div v-if="errors.myID">{{errors.myID}}</div> //this line does not work. // <div v-if="errors[myID]">{{errors.myID}}</div> //neither does this </div> </template> <script> export default { name: 'example', data() { return { errors: {} } }, props: { myID: String, label: String }, methods: { handleFocusOut(e) { console.log('I am in onFocusOut') let myCurrentID = e.target.id this.errors[myCurrentID] = 'This is some text' } } } </script> Esta línea <div v-if="errors.myID"> no funciona. ¿Cómo paso un valor prop al objeto de errores? Como la forma en que he escrito.
Disculpe el código deficiente ya que solo tengo 2 semanas para vue.
Por favor, eche un vistazo al siguiente fragmento:
Vue.component('example', { template: ` <div> <label :for="myID">{{ label }}</label> <input :id="myID" type="text" @focusout="handleFocusOut"/> <div v-if="errors[myID]">{{ errors[myID] }}</div> </div> `, data() { return { errors: {} } }, props: { myID: String, label: String }, methods: { handleFocusOut() { console.log('I am in onFocusOut') this.errors = {[this.myID]: 'This is some text'} } } }) new Vue({ el: "#demo" }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <example my-id="abcd1234" label="Something important"></example> <example my-id="87poi" label="Just a label"></example> <example my-id="zxcvb" label="Extremely important"></example> <example my-id="bcd" label="No importance at all"></example> </div>