Vue onclick 过滤器

Question

尊敬的 Stack Overflow 用户，

在fiddle 下是一段代码，尝试在 Vue JS 中构建一个 onclick 过滤器。但是，该方法还没有起作用。

JS在118-120行，代码取自fiddle。

代码仅在 jsfiddle 中，因为发布代码是由于无法使用 Stack Overflow 功能。 提前感谢您提供的任何帮助，使 onclick 过滤器在 jsfiddle 中工作。

期望的结果是一个只显示带有商家的产品的点击函数，这是按钮的名称。

此致

艾司科尼尔森

Answer 1

您的代码中存在几个问题，导致您无法获得想要的结果：

• 您将 Vue 方法与常规窗口方法混合使用。 filterSelection 方法被定义两次 - 首先作为 Vue methods 定义的一部分，然后再次定义。您会注意到只有第二个被调用。

• 您使用常规的 js 函数来修改 DOM。这与 VueJS 的做法完全相反。您可以使用the proper way Vue does that:class="{ show: propertyFromVue }"，而不是使用自定义方法添加或删除类。这将根据 propertyFromVue 布尔值打开和关闭 show 类。

• 浇头列表只定义一次并显示。您需要一个 second 变量，它只包含“过滤”的项目。这可以通过计算属性来完成：

    computed: {
      filteredToppings: () => this.toopings
        .filter((topping) => !!topping.vendors
          .find((vendor) => vendor.merchang === this.filterSelectionText)
        );
    }
  

  这仅在调用您的 VueJS filterSelection 方法并更新 filterSelectionText 属性时才有效。

  然后你可以使用这个filteredToppings 来显示过滤项目列表:) 祝你好运！