Очистить объект данных при изменении маршрута

Question

У меня есть объект данных, содержащий элемент цвета (строка), и он связан с радиовходом, где у меня есть v-модель по t.

У меня есть кнопка «Добавить в корзину», которую я условно отображаю в шаблоне с помощью v-if - если цвет не был выбран, кнопка не будет видна, иначе это будет так.

Проблема в том, что цвет всегда сохраняет одно значение, и если я переключусь на другой продукт, он сохранит значение из предыдущего продукта, и кнопка будет видна мгновенно.

Есть ли способ очистить строку цвета после изменения маршрута - есть $route.afterEach, но я не уверен, как его использовать здесь.

Спасибо.

Код:

<div class="Radio"> 
     <input 
      type="radio" 
      id="radio-{{ va.attributes.term_id }}" 
      name="variation" 
      value="{{ va.attributes.color_name }}" 
      v-model="color" 
     > 
     <label for="radio-{{ va.attributes.term_id }}"></label> 
</div> 

Материал о кнопках

<div v-if="color"> 
    <button @click="addToBag" class="Btn Btn--primary Btn--expanded">Add to Bag</button> 
</div> 
<div v-else> 
    <button class="Btn Btn--primary Btn--expanded" disabled>Add to Bag</button> 
</div> 

Существует данные, относящиеся к JS

data() { 
    return { 
    product: [], 
    shared: State.data, 
    color: '' 
    } 
} 

Answer 1

1.User глобальной шины событий в запись JS

window.eventBus = new Vue(); 

2.Add обработчик событий для этого выбора цвета компонента, то есть в готовом()

ready(){ 
    var vm = this 
    eventBus.$on('clearColorPicker', function(){vm.color = ''}) 
} 

3.trigger на clearColorPicker событие в $ route.afterEach по

eventBus.$emit('clearColorPicker') 

Это может помочь вам чтобы вызвать некоторое изменение для определенного компонента во время изменения маршрута.

Но я думаю, что в вашем случае есть лучший способ, как изменение триггера продукта ловильного Восст.цвета