Question

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

我有添加到购物车按钮，我使用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.在条目js中使用全局事件总线

window.eventBus = new Vue();

2.为此颜色选择器组件添加事件处理程序，即在ready（）

中

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

3.通过

触发$ route.afterEach中的clearColorPicker事件

eventBus.$emit('clearColorPicker')

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

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

路线更改时清除数据对象

1 个答案: