清除路线更改的数据对象

Question

我有一个包含颜色项（字符串）的数据对象，它与无线电输入相关联，我在 t 上有 v-model。

我有“添加到购物车”按钮，我使用 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.给这个颜色选择器组件添加一个事件处理程序，即在ready()中

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

3.触发$route.afterEach中的clearColorPicker事件

eventBus.$emit('clearColorPicker')

这可以帮助您在路由更改期间触发某些组件的更改。

但我认为在您的情况下，有更好的方法，例如更改产品触发颜色选择器重置