從我的父組件我做這樣的事情：
<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" />
以下是我的子組件：
<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>
這條線<div v-if="errors.myID">不起作用。如何將道具值傳遞給錯誤物件？就像我寫的那樣。
請原諒糟糕的代碼，因為我才 2 周大才能使用 vue。
uj5u.com熱心網友回復：
請看以下片段：
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-i-d="abcd1234" label="Something important"></example>
<example my-i-d="87poi" label="Just a label"></example>
<example my-i-d="zxcvb" label="Extremely important"></example>
<example my-i-d="bcd" label="No importance at all"></example>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/484177.html