Цель: Vue компонент адрес ввода должен находиться внутри Vue компонента mail- composer и отображать список адресов только при нажатии Адресная книга кнопка. Когда кто-то щелкает одно из отображаемых писем или заполняет поле Кому вручную, createdmail.to должен получить значение, а я должен скрыть список адресов.
Vue компонент почта- composer. Этот компонент получает список адресов. (Здесь все работает, я думаю, что единственная часть, которая не работает должным образом, - это v-модель внутри input-address tag)
Vue.component('mail-composer', {
props: ['addressesbook'],
methods: {
send: function(createmail) {
this.$emit('send', createmail);
}
},
template:
`
<div>
<input-address :addresses="addressesbook" v-model="createmail.to"></input-address>
<p><b>Subject: </b><input type="text" v-model="createmail.subject"></input></p>
<p><b>Body: </b><textarea v-model="createmail.body"></textarea></p>
<button @click="send(createmail)">Send</button>
</div>
`,
data(){
return{
createmail:{
to: '',
subject: '',
body: ''
}
}
}
});
Другой компонент Vue - это , который находится в том же файле. (Я думаю, что все проблемы здесь).
Мне нужно отображать список адресов только тогда, когда кто-то нажимает кнопку Адресная книга , и мне приходится скрывать его, когда кто-то снова нажимает кнопку или одно из писем, которые есть в списке. Когда кто-то щелкает письмо из списка, свойство createmail.to из mail- composer должно получить значение почты, даже если я решу отправить почту по со стороны должно происходить то же самое.
Vue.component('input-address',{
props:["addresses"],
template:
`
<div>
<label><b>To: </b><input type="text"></input><button @click="!(displayAddressBook)">Address Book</button></label>
<ul v-if="displayAddressBook">
<li v-for="address in addresses">
{{address}}
</li>
</ul>
</div>
`,
data(){
return{
displayAddressBook: false
}
}
})