Добавить результат поиска в поле поиска ввода vue
Здесь у меня событие @click
<h2 @click = "action(customer.id)">{{ customer.name }}</h2>
При щелчке по любому результату добавьте этот результат к вводу. Любые идеи ?
<input class = "search" type = "text" name = "search" v-model = "search" placeholder = "Search posts..."
@focus = "magic_flag = true">
<div v-if = "magic_flag">
<div class = "post" v-for = "customer in filteredCustomer">
<h2 @click = "action(customer.id)">{{ customer.name }}</h2>
</div>
</div>
Как я могу добавить результат поиска к вводу?
js здесь обновлено:
methods: {
action(item) {
this.selected = item
this.search = item.name
this.magic_flag=false;
}
},
Я показываю здесь обновленную остальную часть содержимого:
<div v-if = "selected">
<div class = "post" v-for = "customer in filteredCustomer">
<div v-if = "customer === selected">
<h1>{{ customer.name }}</h1>
<h1>{{ customer.id }}</h1>
<h1>{{ customer.address }}</h1>
</div>
</div>
</div>
Я обновил свой вопрос, у меня есть метод, но мне нужно передать выбранное имя для ввода поиска
Где используется this.selected? ваша v-модель для ввода - search
Ответы 1
Вместо передачи customer.id методу действия вы можете передать объект customer в качестве параметра действия.
Вы можете сделать что-то подобное.
var vm = new Vue({
el: '#app',
data: {
search: "",
filteredCustomer:[{name:'test1',id:1},{name:'test2',id:2},{name:'test3',id:3}]
},
methods: {
action (customer) {
this.search=customer.name
this.filteredCustomer=this.filteredCustomer.filter(o=> o.id!=customer.id)
}
}
});h2{cursor:pointer}<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js" type = "text/javascript"></script>
<div id = "app">
<input class = "search" type = "text" name = "search" v-model = "search" placeholder = "Search posts..."
>
<div >
<div class = "post" v-for = "customer in filteredCustomer">
<h2 href @click = "action(customer)">{{ customer.name }}</h2>
</div>
</div>
</div>Получил ошибку, TypeError: Cannot read property 'toLowerCase' of undefined
вы должны использовать toLowerCase где-то, что вызывает эту ошибку
Плюс как я могу удалить поиск из списка ниже, просто отобразить результат при поиске ввода
Я получил имя, добавленное к вводу, спасибо, еще одна вещь, как я могу удалить его из списка ниже, когда он добавлен, чтобы у меня его не было дважды?
Вы можете добавить этот this.filteredCustomer=this.filteredCustomer.filter(o=> o.id!=customer.id), чтобы отфильтровать любое выбранное вами поле. Я обновил код
Под добавлением вы имеете в виду, что непрерывно добавляете поля из списка одно за другим?
Как я могу отображать другой контент, например, customer.id customer.address, когда я добавляю this.magic_flag=false;, я не могу показывать остальную часть контента по щелчку. У меня есть еще одна переменная, выбранная с помощью которой отображается остальное содержимое. Спасибо!
где используется this.magic_flag = false? Можете ли вы добавить соответствующий код к вопросу.
Я обновил свой вопрос, у меня есть this.selected = item и еще один цикл v-for для отображения остальной части контента при нажатии одного имени из поиска <div v-if = "customer === selected">
Таким образом, я могу показывать остальную часть контента только тогда, когда поиск находится в фокусе, но мне нужно отображать остальную часть контента, когда я нажимаю один результат поиска, независимо от того, в фокусе или нет
Хорошо, я заставил это работать, большое спасибо @Helping hand очень помогла!
Рад, что это сработало, вы удалили v-if = "customer == selected", чтобы работала последняя проблема?
нет, я только что удалил magic_flag из выбранного v-если он у меня там по ошибке, все работает, потому что это совершенно другой v-for. Спасибо, мужик!
вам нужно заполнить
this.searchвнутри функцииaction. Передайте клиента как параметр к действию, а затемthis.search =customer.name