Смена картинки при очищение поля vuetify

109

16 января 2020, 19:10

работаю c vue.js, в частности с vuetify. Натолкнулся на проблему при использование компонента v-text-field. Нужно сделать поле input с картинкой лупы в конце строки. При наборе текста должен появится крестик( который очищает input) вместо лупы. Я все сделал, но не понимаю как сделать этот переключатель(чтобы при наборе текста появлялся крестик, лупа исчезает, а при очистке, крест исчезает, лупа появляется. У меня получилось вот так:

export default { 
  name: 'app', 
  data() { 
    return { 
      searchNumber: '', 
      show: true 
    },

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> 
 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script> 
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet"> 
 
<div id="app"> 
<v-text-field  
label="Поиск по номеру"  
v-model="searchNumber" :append-icon="searchNumber=='' ? 'search' : ''"  clearable> 
</v-text-field> 
</div>

В качестве иконок используется material ui.