VueJS + V-IF：传递道具给容器计算？

Question

因此，我试图创建一个计算程序来评估我的道具的两个条件，但是当我在row中评估hasWebsite时，我得到了整个容器，而不是得到道具的价值。我不知道为什么。

模板

<a v-if="hasWebsite(props.row)" class="btn btn-success" :href="props.supplier.websiteUrl" target="_blank"><i class="fa fa-eye"></i></a>

计算

computed: {
hasWebsite: function(row){
  console.log(row)
  return !!(row.status !== 100 && row.supplier.websiteUrl);
}

Answer 1

您应该使用方法而不是computed属性：

  methods: {
     hasWebsite: function(row){
      console.log(row)
      return !!(row.status !== 100 && row.supplier.websiteUrl);
   }

Answer 2

根据文档-computed properties不接受参数，而是使用自定义get和set方法表示变量。这意味着，将访问而不是调用计算的属性。

在您的情况下，应使用methods。当参数改变时，它将是被动的并重新计算。

methods: {
  hasWebsite (row) {
    return !!(row.status !== 100 && row.supplier.websiteUrl);
  }
}

模板中的用法保持不变。